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

seç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:

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

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

Ayrıca Bakınız

animation özelliği,
animasyon yapmanızı sağlar