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