Transition Özelliği

transition özelliği, yumuşak geçişler için bir kısaltmadır, aynı anda transition-duration, transition-property, transition-timing-function ve transition-delay özelliklerini ayarlamanıza olanak tanır.

Sözdizimi

cssseçici {
  transition: değer;
}

Özelliklerin sırası önemli değildir, ancak geçiş süresi (transition-duration) gecikmeden (transition-delay) önce gelmelidir.

Değerler

İlgili özelliklere bakın. Varsayılan değer: all 0s ease 0s.

none değeri tüm geçişleri iptal eder (geçişler anında gerçekleşir).

Örnek

Fareyi bloğun üzerine getirin - 3 saniye hiçbir şey olmayacak (3s gecikme var), ardından genişliğini 2 saniyede yavaşça değiştirecek. Eğer fareyi çekerseniz - yine 3 saniye hiçbir şey olmayacak, ardından genişlik yavaşça başlangıç değerine dönecek:

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

css#elem {
  border: 1px solid black;
  transition: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Ayrıca Bakınız