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