CSS animation-duration Özelliği
CSS3
Bu özellik, animasyonun oynama süresini belirler. Saniye cinsinden ya da mili saniye cinsinden tanımlanır.
Yapısı (Syntax)animation-duration: süre
| Varsayılan Değer | 0 |
| JavaScript Yapısı |
object.style.animationDuration="3s"
|
| Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| süre | Saniye ya da milisaniye cinsinden süre | CSS3 |
Örnekler
3 saniye sürecek bir animasyon oluşturalım.
<div class="box"></div>
<style>
.box {
width: 40px;
height: 40px;
border-radius: 50%;
background: green;
position: relative;
animation: boxAnimation;
animation-duration: 3s;
}
@keyframes boxAnimation {
from {left: 0; opacity: 0}
to {left: 200px; opacity: 1}
}
</style>500 mili saniye sürecek bir animasyon oluşturalım.
<div class="box"></div>
<style>
.box {
width: 40px;
height: 40px;
border-radius: 50%;
background: green;
position: relative;
animation: boxAnimation;
animation-duration: 500ms;
}
@keyframes boxAnimation {
from {left: 0; opacity: 0}
to {left: 200px; opacity: 1}
}
</style>Tarayıcı Desteği
| Chrome | Firefox | Edge | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|---|
animation-duration
|
43 -webkit-
|
16
-webkit-
|
12
-webkit-
|
10 * Kısmen
|
30
-webkit-
|
9
-webkit-
|
Destekliyor
Desteklemiyor
