Yükleniyor...

CSS Geçişler

Kutu gölgesi size sakin derinlik verdi. Geçişler sakin zaman içinde değişim verir: düğme hover’da arka planı yumuşatır, kart odakta biraz yükselir, bağlantı rengi sıçramak yerine kayar. Hâlâ iki durum yazarsınız — tarayıcı sizin belirlediğiniz süre boyunca aralarında interpolasyon yapar.

Geçiş nedir

Bir geçiş tek başına yeni bir görünüm icat etmez. Zaten değişen bir özelliği izler (çoğu zaman :hover, :focus-visible veya bir sınıf) ve o değişimi canlandırır. Geçiş olmadan sıçrama anlıktır; geçişle kısa, okunaklı bir kayma alırsınız.

Dört uzun yazım: transition-property, transition-duration, transition-timing-function ve transition-delay. Günlük işte çoğu zaman transition kısayolu yeter.

Özellik ve süre

Nelerin canlanabileceğini ve değişimin ne kadar süreceğini adlandırın. Süreler zaman ifadeleridir (0.2s, 200ms). Kısa ve amaçlı, teatral beklemeden iyidir — UI geri bildirimi çoğu zaman 150ms–300ms civarında iyi hissettirir.

Hover’da yumuşak düğme arka planı

css 
.btn {
background: #2563eb;
color: #fff;
border: none;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 0.2s;
}

.btn:hover {
background: #1d4ed8;
color: #f8fafc;
}

Geçişi temel kurala koyun ki hover’a girmek ve çıkmak ikisi de canlansın. Yalnızca kastettiğiniz özellikleri listeleyin — yoksa istenmeyen yerleşim sıçramaları yarım saniye kayar.

Timing ve gecikme

transition-timing-function hız eğrisini şekillendirir: ease (varsayılan his), linear, ease-in, ease-out, ease-in-out veya özel cubic-bezier(...). transition-delay başlamadan önce bekler — basamaklı menüler için yararlı, tek düğmede kolayca abartılır.

opacity’te ease-out ve linear

css 
.fade-panel {
opacity: 0.65;
transition: opacity 0.35s ease-out;
}

.fade-panel.is-bright {
opacity: 1;
}

.meter-bar {
width: 40%;
transition: width 0.4s linear;
}

.meter-bar.is-full {
width: 100%;
}

UI belirirken ease-out çoğu zaman doğal gelir. Linear, düzenli okunması gereken ilerleme için uygundur. Gecikmeyi bilinçli diziler için saklayın — her tıklamayı geç hissettirmek için değil.

Kısayol ve çok özellikli hareket

Kısayolda tipik sıra: özellik, süre, timing-function, gecikme. Birden fazla geçişi virgülle ayırın. Boyamaya dost özellikleri tercih edin — transform ve opacity genelde width, height, top veya margin canlandırmaktan daha akıcıdır.

transform ve gölge ile hover yükseltme

css 
.card-lift {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.card-lift:hover,
.card-lift:focus-visible {
transform: translateY(-0.25rem);
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14);
}

Burada önceki dersin derinliği hareketle buluşur: gölge ve yükseliş aynı hover anını paylaşır. Yolculuğu küçük tutun ki sayfa hâlâ sağlam hissetsin.

Azaltılmış hareket ve ne zaman animasyon

Bazı insanlar daha az hareket ister. prefers-reduced-motion: reduce değerine saygı gösterin — zorunlu olmayan geçişleri kısaltın veya kapatın. Geçişler A → B durum değişikliklerinde parlar. Döngü veya çok adımlı hikâyeler CSS Animations (@keyframes) alanıdır — Transforms’tan sonra.

Kendiniz deneyin

  1. Bir düğmeye 0.2s arka plan geçişi ekleyip hover yapın — sonra transition’ı :hover’dan temel kurala taşıyıp hover’dan çıkışı karşılaştırın.
  2. Panel sınıfı aç/kapa ile opacity’yi ease-out ile canlandırın; linear deneyip hissi not edin.
  3. Kart hover’ında transform: translateY(...) ile daha yumuşak box-shadow birleştirin (iki özellik, bir kısayol listesi).
  4. DevTools’ta prefers-reduced-motion: reduce öykünümü yapın ve zorunlu olmayan hareketin geri çekildiğini doğrulayın.
  5. Bu alıştırmada açık menü için height canlandırmaktan kaçının — o deseni sonraya bırakın.

Sık hatalar

  • Her özelliğin, yerleşim dahil, tam bir saniye kayması için transition: all 1s yazmak
  • Arayüzü yavaş hissettiren çok saniyelik süreler
  • transform veya opacity yeterken width / top / margin canlandırmak
  • prefers-reduced-motion yok saymak
  • Geçişten sonsuz döngü beklemek — o animasyon alanıdır

Özet

  • Geçişler iki durum arasında özellik değişimini bir süre boyunca yumuşatır
  • Özellik, süre, timing-function ve gecikmeyi yönetin (veya transition kısayolunu kullanın)
  • Boyamaya dost özelliklerde kısa hareket; geçişi temel kurala koyun
  • Reduced-motion’a saygı; döngü ve karmaşık diziler için keyframe animasyonları
  • Effects & Motion’da sıradaki: Transforms

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
6
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 59 / 63
Css Ders