transition-delay Özelliği
transition-delay özelliği,
transition
geçiş efektinin başlamasından önceki gecikme süresini belirler.
Sözdizimi
seçici {
transition-delay: saniye veya milisaniye cinsinden süre;
}
Değerler
| Değer | Açıklama |
|---|---|
s |
Saniye cinsinden süreyi belirtir (örneğin 3s).
Ondalıklı değerler de belirtilebilir,
örneğin, 0.5s - yarım saniye.
|
ms |
Milisaniye cinsinden süreyi belirtir (örneğin 3ms).
Bir saniye 1000 milisaniyedir.
|
Varsayılan değer: 0s.
Örnek
Fareyi kutunun üzerine getirin - 3 saniye
boyunca hiçbir şey olmayacak (3s gecikme var),
ardından genişliğini 2 saniye içinde yavaşça
değiştirecek. Eğer fareyi çekerseniz - yine 3
saniye boyunca hiçbir şey olmayacak, ardından genişlik
orijinal değerine yavaşça inecek:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Örnek
Fareyi kutunun üzerine getirin - önce genişliğini
2 saniyede değiştirecek, ardından yüksekliğini
4 saniyede değiştirecek. Özellikler sırayla
değişecek, çünkü yükseklik için gecikme 3
saniye olarak ayarlandı (genişlik değişim süresi).
Eğer fareyi çekerseniz - değişiklikler ters sırada
gerçekleşecek: önce genişlik, ardından yükseklik azalacak:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
Ayrıca Bakınız
-
Geçiş efekti uygulanacak özelliğin adını belirten
transition-propertyözelliği -
Geçiş efektinin süresini belirten
transition-durationözelliği -
Geçiş efekti için zamanlama fonksiyonunu belirten
transition-timing-functionözelliği -
Geçiş efekti için kısa tanım olan
transitionözelliği -
Animasyon oluşturmanızı sağlayan
animationözelliği