Svojstvo animation-iteration-count

Svojstvo animation-iteration-count postavlja broj ponavljanja animacije. Podrazumevano se animacija ponavlja samo 1 put i zatim se vraća u početno stanje. Naše svojstvo, međutim, dozvoljava da postavite određeni broj ponavljanja ili uopšte postavite beskonačno ponavljanje.

Sintaksa

selektor {
	animation-iteration-count: ceo ili razlomljen broj | infinite;
}

Vrednosti

Vrednost	Opis
Broj	Zadati broj ponavljanja, nakon čijeg izvršenja će se animacija zaustaviti. Položaj koji će zauzeti reguliše se svojstvom `animation-fill-mode`. Mogu se zadati razlomljene vrednosti - u ovom slučaju će se animacija odigrati samo delimično.
`infinite`	Animacija će se ponavljati beskonačno.

Podrazumevana vrednost: 1.

Primer . Konačan broj ponavljanja

U ovom primeru animacija će se ponoviti samo 3 puta, a zatim će se vratiti u početno stanje:

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

Primer . Vrednost infinite

A sada će se animacija ponavljati beskonačno:

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

Pogledajte takođe

svojstvo animation-name,
koje postavlja ime animacije
svojstvo animation-duration,
koje postavlja trajanje animacije
svojstvo animation-delay,
koje postavlja kašnjenje pre izvršenja animacije
svojstvo animation-timing-function,
koje postavlja brzinu izvršenja animacije
svojstvo animation-direction,
koje postavlja smer animacije
svojstvo animation-fill-mode,
koje postavlja stanje animacije
svojstvo animation-play-state,
koje dozvoljava pauziranje animacije
svojstvo animation,
koje predstavlja skraćenicu za animacije
komanda @keyframes,
koja postavlja ključne kadrove animacije
glatki prelazi transition, koji predstavljaju animaciju pri prelasku mišem preko elementa