Својство animation-iteration-count

Својство animation-iteration-count поставља број понављања анимације. Подразумевано се анимација понови само 1 пут и затим се враћа у почетно стање. Наше својство, међутим, омогућава да се постави одређени број понављања или уопште постави бесконачно понављање.

Синтакса

селектор {
	animation-iteration-count: цео или разломљени број | infinite;
}

Вредности

Вредност Опис

Број Задати број понављања, након извршења којих ће се анимација зауставити. Положај, који ће заузети, регулише се својством animation-fill-mode. Могуће је постављати разломљене вредности - у том случају ће се анимација одиграти само делимично.

infinite Анимација ће се понављати бесконачно.

Вредност	Опис
Број	Задати број понављања, након извршења којих ће се анимација зауставити. Положај, који ће заузети, регулише се својством `animation-fill-mode`. Могуће је постављати разломљене вредности - у том случају ће се анимација одиграти само делимично.
`infinite`	Анимација ће се понављати бесконачно.

Подразумевана вредност: 1.

Пример . Крајњи број понављања

У овом примеру ће се анимација поновити само 3 пута, а затим ће се вратити у почетно стање:

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

Пример . Вредност infinite

А сада ће се анимација понављати бесконачно:

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

Погледајте такође

својство animation-name,
које поставља име анимације
својство animation-duration,
које поставља трајање анимације
својство animation-delay,
које поставља одлагање пре извршења анимације
својство animation-timing-function,
које поставља брзину извршења анимације
својство animation-direction,
које поставља правац анимације
својство animation-fill-mode,
које поставља стање анимације
својство animation-play-state,
које омогућава да се анимација паузира
својство animation,
представља скраћени запис за анимације
команда @keyframes,
која поставља кључне кадрове анимације
глатки прелази transition, представљају анимацију при преласку преко елемента