Transition-delay

CSS kursu · Orta seviye · Ders 62/98

transition-delay ile geçiş gecikmesini öğrenirsin.

transition-delay

transition-delay, geçişin ne zaman başlayacağını söyler. Hover başladığı an değil, belirlediğin süre kadar bekler, sonra geçiş başlar. Değer yine saniye veya milisaniyedir: 0.2s, 200ms.

Varsayılan 0s'dir; yani bekleme yok, geçiş anında başlar. Gecikme özellikle bildirim (toast) veya ipucu (tooltip) gibi geç görünen öğelerde yararlıdır.

Pozitif ve sıfır gecikme

Bir pozitif gecikme, geçişi sonradan başlatır. Hover'dan yarım saniye sonra renk değişmeye başlarsa, kullanıcı fareyi yanlışlıkla gezdirmiş gibi hisseder; bu yüzden gecikme genelde kısa tutulur (0.1s – 0.3s).

0s gecikme en yaygın seçimdir. Yalnızca bir ipucunun biraz bekleyip açılmasını istiyorsan gecikme verirsin; aksi hâlde geçiş hemen başlar.

Bildirim kutusu (toast)

Bir bildirim (toast) kutusu hover'da hafifçe renk değiştirsin; ancak kullanıcı fareyi biraz tutunca. transition-delay: 0.2s ile geçişin başlamasını 0.2 saniye geciktirirsin; böylece yanlışlıkla gezinme tepki vermez.

Bu küçük gecikme, sabırlı bir arayüz hissi yaratır. Kullanıcı önemli bir bildirimi kaçırmaz, ama her fare hareketi tepki doğurmaz.

Uygulama Bildirim kutusuna gecikme ekle

.toast öğesine transition-delay: 0.2s bildirimini ekle. .toast:hover durumu için background-color: #fbbf24 tanımla. Böylece hover başladıktan 0.2 saniye sonra renk geçişi başlasın.

Örnek çözümü göster

.toast {
  background-color: #fde68a;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-delay: 0.2s;
}

.toast:hover {
  background-color: #fbbf24;
}

Kendini test et

transition-delay: 0.5s ne yapar?
```
.tip {
  transition-delay: 0.5s;
}
```
- Geçişi 0.5 saniye hızlandırır
- Geçiş süresini 0.5 saniye yapar
- Geçişi 5 saniye durdurur
- Geçiş başlamadan 0.5 saniye bekler
Cevabı göster

Geçiş başlamadan 0.5 saniye bekler — Doğru. 0.5s gecikme, geçişin yarım saniye bekleyip sonra başlamasını söyler.

Bildirim kutusu 0.2 saniye gecikmeli başlasın

.toast {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-delay: ____;
}

Cevabı göster

.toast {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-delay: 0.2s;
}

Gecikme değerini hissiyle eşleştir

0s

Bekleme yok, hemen başlar
0.2s

Kısa gecikme, gözle zor fark edilir
0.5s

Orta gecikme, belirgin
1s

Uzun gecikme, dikkat çeker

Transition-delay