transition-duration Özelliği

transition-duration özelliği, bir transition geçiş efektinin tamamlanması için gereken süreyi belirler.

Sözdizimi

seçici {
	transition-duration: s veya ms cinsinden süre;
}

Değerler

Değer	Açıklama
`s`	Saniye cinsinden süre belirtir (örneğin `3s`). Ondalıklı değerler de belirtilebilir, örneğin, `0.5s` - yarım saniye.
`ms`	Milisaniye cinsinden süre belirtir (örneğin `3ms`). Bir saniye `1000` milisaniyedir.

Varsayılan değer: 0s.

Örnek

Fareyi kutunun üzerine getirin - genişliğini 2 saniyede yumuşak bir şekilde değiştirecektir.

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

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

Ayrıca Bakınız

Yumuşak geçiş uygulanacak özelliğin adını belirten transition-property özelliği
Yumuşak geçişten önceki gecikmeyi belirten transition-delay özelliği
Yumuşak geçiş için zamanlama fonksiyonunu belirten transition-timing-function özelliği
Yumuşak geçiş için kısa tanım özelliği olan transition özelliği
Animasyon oluşturmanızı sağlayan animation özelliği