Proprietatea animation-iteration-count

Proprietatea animation-iteration-count stabilește numărul de repetări ale animației. În mod implicit animația se va repeta doar 1 dată și apoi se va întoarce în starea inițială. Proprietatea noastră, totuși, permite stabilirea unui număr specific de repetări sau chiar stabilirea unei repetări infinite.

Sintaxă

selector {
	animation-iteration-count: număr întreg sau fracționar | infinite;
}

Valori

Valoare	Descriere
Număr	Numărul specificat de repetări, după finalizarea cărora animația se va opri. Poziția pe care o va ocupa este reglată de proprietatea `animation-fill-mode`. Se pot stabili valori fracționare - în acest caz animația se va reda doar parțial.
`infinite`	Animația se va repeta la infinit.

Valoare implicită: 1.

Exemplu . Număr finit de repetări

În acest exemplu animația se va repeta doar 3 ori, iar apoi se va întoarce în starea inițială:

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

Exemplu . Valoarea infinite

Iar acum animația se va repeta la infinit:

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

Vedeți și

proprietatea animation-name,
care stabilește numele animației
proprietatea animation-duration,
care stabilește durata animației
proprietatea animation-delay,
care stabilește întârzierea înainte de executarea animației
proprietatea animation-timing-function,
care stabilește viteza de executare a animației
proprietatea animation-direction,
care stabilește direcția animației
proprietatea animation-fill-mode,
care stabilește starea animației
proprietatea animation-play-state,
care permite punerea animației pe pauză
proprietatea animation,
reprezentând o prescurtare pentru animații
comanda @keyframes,
care stabilește cadrele cheie ale animației
tranzițiile line transition, reprezentând o animație la trecerea cursorului peste element