Giriş yap

CSS animation-iteration-count Özelliği
CSS3

Bu özellik, elemana uygulanan annimasyonun kaç defa oynatılacağını belirler.

Yapısı (Syntax)animation-iteration-count: sayı | infinite

NOT
Animasyon
Varsayılan Değer 1
JavaScript Yapısı object.style.animationIterationCount="infinite"
Animasyon Özellikleri Uygulanabilir Hayır (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
sayı Animasyonun kaç kez oynatılacağını belirleyen sayı. Varsayılan değeri 1'dir. CSS3
infinite Animasyonu hiç durmayacak şekilde sonsuza kadar oynatır. CSS3

Örnekler

3 defa oynatılacak bir animasyon oluşturalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s;
        animation-iteration-count: 3;
    }
    @keyframes boxAnimation {
        from {left: 0; opacity: 0}
        to {left: 200px; opacity: 1}
    }
</style>

Sonsuza kadar devam eden bir animasyon oluşturalım.

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

<style>
    .box {
        width: 60px;
        height: 60px;
        background: blue;
        position: relative;
        animation: boxAnimation 1s;
        animation-iteration-count: infinite;
    }
    @keyframes boxAnimation {
        from {left: 0; opacity: 0}
        to {left: 200px; opacity: 1}
    }
</style>

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