Transition-duration

transition-duration ile geçiş süresini öğrenirsin.

transition-duration

transition-duration, geçişin ne kadar süreceğini söyler. Değer bir zaman birimidir: 0.3s gibi saniye veya 300ms gibi milisaniye. Süre kısaldıkça geçiş hızlanır.

Süre verilmezse varsayılan 0s'dir; yani geçiş olmaz, değer anında atlar. Bu yüzden transition kullanacaksan mutlaka bir süre vermelisin.

Saniye ve milisaniye

İki zaman birimi kullanılır: s (saniye) ve ms (milisaniye). 1s = 1000ms'dir. İstediğini seçebilirsin; ancak kesirli saniye yazarken baştaki sıfır atılabilir: .3s ile 0.3s aynıdır.

Arayüzde en sık 0.2s – 0.4s arası kullanılır. Daha kısa olursa göz zor yakalar; daha uzun olursa kullanıcı bekler hisseder.

Kart hover rengi

Bir kart hover'da koyu metin rengine geçsin. transition-property: color ve transition-duration: 0.4s birlikte yazıldığında renk 0.4 saniyede akar; okuyucu gözü kayarak takip eder.

0.4 saniye, uzun okuma metinlerinde rahat bir tempo verir. Daha hızlı olursa göz kaçırır; daha yavaş olursa dikkat dağılır.

Uygulama Kart geçişine süre ekle

.card öğesine transition-duration: 0.4s bildirimini ekle. .card:hover durumu için color: tomato tanımla. Böylece hover'da yazı rengi 0.4 saniyede yumuşakça tomato tonuna akar.

Örnek çözümü göster

.card {
  color: #1f2937;
  transition-property: color;
  transition-duration: 0.4s;
}

.card:hover {
  color: tomato;
}

Kendini test et

transition-duration: 0.3s ne anlama gelir?
```
.card {
  transition-property: color;
  transition-duration: 0.3s;
}
```
- Geçiş 0.3 saniyede tamamlanır
- Geçiş 3 saniye sonra başlar
- Geçiş 0.3 kez tekrarlanır
- Geçiş yalnızca 30 milisaniye sürer
Cevabı göster

Geçiş 0.3 saniyede tamamlanır — Doğru. 0.3s, geçişin baştan sona 0.3 saniyede bitmesini söyler.

Kart geçişi 0.4 saniye sürsün

.card {
  transition-property: color;
  transition-duration: ____;
}

Cevabı göster

.card {
  transition-property: color;
  transition-duration: 0.4s;
}

Süre değerini hissiyle eşleştir

0.3s

Hızlı, çeyrek saniyenin altı
1s

Tam bir saniye
2s

Yavaş, gözle rahat izlenir
0s

Anında, geçiş yok

Sıradaki ders: Timing function

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler