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

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>

tayfunerbilen
28 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar