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

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>

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