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

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
28 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar