Vlastnosť animation-iteration-count

Vlastnosť animation-iteration-count nastavuje počet opakovaní animácie. Predvolene sa animácia zopakuje iba 1 krát a potom sa vráti do pôvodného stavu. Naša vlastnosť však umožňuje nastaviť konkrétny počet opakovaní alebo dokonca nastaviť nekonečné opakovanie.

Syntax

selektor {
	animation-iteration-count: celé alebo desatinné číslo | infinite;
}

Hodnoty

Hodnota	Popis
Číslo	Stanovený počet opakovaní, po vykonaní ktorých sa animácia zastaví. Pozíciu, ktorú zaujme, reguluje vlastnosť `animation-fill-mode`. Je možné nastaviť desatinné hodnoty - v tomto prípade sa animácia prehrá iba čiastočne.
`infinite`	Animácia sa bude opakovať nekonečne.

Predvolená hodnota: 1.

Príklad . Konečný počet opakovaní

V tomto príklade sa animácia zopakuje iba 3 krát a potom sa vráti do pôvodného stavu:

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

Príklad . Hodnota infinite

A teraz sa animácia bude opakovať nekonečne:

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

Pozri tiež

vlastnosť animation-name,
ktorá nastavuje názov animácie
vlastnosť animation-duration,
ktorá nastavuje trvanie animácie
vlastnosť animation-delay,
ktorá nastavuje oneskorenie pred vykonaním animácie
vlastnosť animation-timing-function,
ktorá nastavuje rýchlosť vykonávania animácie
vlastnosť animation-direction,
ktorá nastavuje smer animácie
vlastnosť animation-fill-mode,
ktorá nastavuje stav animácie
vlastnosť animation-play-state,
ktorá umožňuje pozastaviť animáciu
vlastnosť animation,
predstavujúce skratku pre animácie
príkaz @keyframes,
nastavujúci kľúčové snímky animácie
plynulé prechody transition, predstavujúce animáciu pri prejdení myšou nad prvok