v2.1.1
Giriş yap

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
tayfunerbilen
22 gün önce eklendi.
Github'da Düzenle
Önceki animation-direction Sonraki animation-fill-mode