Animation-iteration-count xususiyati

animation-iteration-count xususiyati animatsiyaning takrorlanish sonini belgilaydi. Standart holatda animatsiya faqat 1 marta takrorlanadi va keyin boshlang‘ich holatiga qaytadi. Bizning xususiyatimiz, shu bilan birga, ma’lum bir takrorlanish sonini belgilashga yoki umuman cheksiz takrorlanishni belgilashga imkon beradi.

Sintaksis

selector {
	animation-iteration-count: butun yoki kasr son | infinite;
}

Qiymatlar

Qiymat	Tavsif
Son	Belgilangan takrorlanishlar soni, ular bajarilgandan so‘ng animatsiya to‘xtaydi. U egallaydigan holat, `animation-fill-mode` xususiyati tomonidan boshqariladi. Kasr qiymatlarni ham belgilash mumkin - bu holda animatsiya faqat qisman ijro etiladi.
`infinite`	Animatsiya cheksiz takrorlanadi.

Standart qiymat: 1.

Misol . Chekli takrorlanishlar soni

Ushbu misolda animatsiya faqat 3 marta takrorlanadi, so‘ngra boshlang‘ich holatiga qaytadi:

<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;
}

Misol . Infinite qiymati

Endi esa animatsiya cheksiz takrorlanadi:

<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;
}

Shuningdek qarang

animation-name xususiyati,
animatsiya nomini belgilaydi
animation-duration xususiyati,
animatsiya davomiyligini belgilaydi
animation-delay xususiyati,
animatsiyani bajarishdan oldin kechikishni belgilaydi
animation-timing-function xususiyati,
animatsiya bajarish tezligini belgilaydi
animation-direction xususiyati,
animatsiya yo‘nalishini belgilaydi
animation-fill-mode xususiyati,
animatsiya holatini belgilaydi
animation-play-state xususiyati,
animatsiyani pauzaga qo‘yishga imkon beradi
animation xususiyati,
animatsiyalar uchun qisqartma hisoblanadi
@keyframes komandasi,
animatsiya kalit kadrlarini belgilaydi
transition silliq o‘tishlar, element ustiga sichqoncha olib borilganda amalga oshiriladigan animatsiyani ifodalaydi