animation-iteration-count Özelliği

animation-iteration-count özelliği bir animasyonun kaç kez tekrarlanacağını belirler. Varsayılan olarak animasyon sadece 1 kez tekrarlanır ve ardından başlangıç durumuna döner. Ancak bu özellik, belirli bir tekrar sayısı belirlememize veya sonsuz tekrar ayarlamamıza olanak tanır.

Sözdizimi

seçici {
	animation-iteration-count: tam sayı veya ondalıklı sayı | infinite;
}

Değerler

Değer	Açıklama
Sayı	Belirtilen sayıda tekrardan sonra animasyon duracaktır. Animasyonun hangi konumda duracağı, `animation-fill-mode` özelliği ile kontrol edilir. Ondalıklı değerler de belirtilebilir - bu durumda animasyon sadece kısmen oynatılır.
`infinite`	Animasyon sonsuz kez tekrarlanır.

Varsayılan değer: 1.

Örnek . Sınırlı Tekrar Sayısı

Bu örnekte animasyon sadece 3 kez tekrarlanacak ve ardından başlangıç durumuna dönecektir:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 3;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Örnek . Infinite Değeri

Şimdi ise animasyon sonsuza kadar tekrarlanacak:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ayrıca Bakınız

animasyonun adını belirleyen animation-name özelliği
animasyonun süresini belirleyen animation-duration özelliği
animasyondan önceki gecikmeyi belirleyen animation-delay özelliği
animasyonun hızını belirleyen animation-timing-function özelliği
animasyonun yönünü belirleyen animation-direction özelliği
animasyonun durumunu belirleyen animation-fill-mode özelliği
animasyonu duraklatmayı sağlayan animation-play-state özelliği
animasyonlar için kısa yol görevi gören animation özelliği
animasyonun karelerini tanımlayan @keyframes komutu
bir öğenin üzerine gelindiğinde animasyon etkisi yaratan transition geçişleri