v2.1.1
Giriş yap

CSS animation-delay Özelliği

CSS3

Animasyonun başlamadan önce ne kadar süre bekleyeceğini belirler.

Yapısı (Syntax)animation-delay: süre
NOT
Negatif değer verildiğinde animasyon ona göre başlangıç yapar. Örneğin 5 saniye sürecek bir animasyon işleminde -2500ms değeri verilirse animasyon işlemi ortadan başlayarak devam eder.
Gecikme sadece ilk kez oynatıldığında geçerli olur.
Varsayılan Değer 0s
JavaScript Yapısı object.style.animationDelay = "1s"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
süre Saniye ve milisaniye cinsinden değer verilir. Örneğin 1s ya da 500ms gibi. CSS3

Örnekler

Örneğin bir kutuyu soldan sağa doğru kaydıralım ancak bu işlem 2 saniye sonra başlasın

<div class="box"></div>

<style>
    .box {
        width: 60px;
        height: 60px;
        border: 1px solid blue;
        position: relative;
        animation: boxAnimation 3s infinite;
        animation-delay:  2s;
    }
    @keyframes boxAnimation {
        from {left: 0}
        to {left: 200px}
    }
</style>

Eğer negatif değer verilirse animasyon başlangıcı ona göre ayarlanır. Yani 3 saniye sürecek bir animasyona -500ms değeri verilirse animasyon 500ms lik başlangıç noktasından başlar.

<div class="box"></div>

<style>
    .box {
        width: 60px;
        height: 60px;
        border: 1px solid blue;
        position: relative;
        animation: boxAnimation 3s infinite;
        animation-delay: -500ms;
    }
    @keyframes boxAnimation {
        from {left: 0}
        to {left: 200px}
    }
</style>

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
animation-delay 43
-webkit-
16
-webkit-
12 10 30
-webkit-
9
-webkit-
Destekliyor
Desteklemiyor
tayfunerbilen
76 gün önce eklendi - 919 kez görüntülendi.
Github'da Düzenle
Önceki backdrop-filter Sonraki animation-direction