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>HTML
Editörde Görüntüle

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>HTML
Editörde Görüntüle

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

1597 gün önce eklendi - 3184 kez görüntülendi.

Github'da Düzenle