v2.1.1
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>

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
animation-iteration-count 43
-webkit-
16
-webkit-
12
-webkit-
10 30
-webkit-
9
-webkit-
Destekliyor
Desteklemiyor
tayfunerbilen
22 gün önce eklendi.
Github'da Düzenle
Önceki animation-fill-mode Sonraki animation-name