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>

Editörde Görüntüle

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>

Editörde Görüntüle

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

1501 gün önce eklendi - 2662 kez görüntülendi.

Github'da Düzenle