transition-delay Özelliği

transition-delay özelliği, transition geçiş efektinin başlamasından önceki gecikme süresini belirler.

Sözdizimi

cssseçici {
  transition-delay: saniye veya milisaniye cinsinden süre;
}

Değerler

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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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