Eienskap animation-iteration-count

Die eienskap animation-iteration-count spesifiseer die aantal kere wat 'n animasie herhaal moet word. Standaard sal 'n animasie slegs 1 keer herhaal en dan terugkeer na sy oorspronklike toestand. Ons eienskap laat eger toe om 'n spesifieke aantal herhalings te stel, of selfs oneindige herhaling te spesifiseer.

Sintaksis

selekteerder {
	animation-iteration-count: heelgetal of desimale getal | infinite;
}

Waardes

Waarde	Beskrywing
Getal	Die gespesifiseerde aantal herhalings, waarna die animasie sal stop. Die posisie wat dit dan inneem, word gereguleer deur die eienskap `animation-fill-mode`. Desimale waardes kan gebruik word - in hierdie geval sal die animasie slegs gedeeltelik speel.
`infinite`	Die animasie sal eindeloos herhaal.

Standaardwaarde: 1.

Voorbeeld . Eindige aantal herhalings

In hierdie voorbeeld sal die animasie slegs 3 keer herhaal, en dan terugkeer na die oorspronklike toestand:

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

Voorbeeld . Waarde infinite

Nou sal die animasie eindeloos herhaal:

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

Sien ook

die eienskap animation-name,
wat die naam van die animasie spesifiseer
die eienskap animation-duration,
wat die duur van die animasie spesifiseer
die eienskap animation-delay,
wat die vertraging voor die animasie spesifiseer
die eienskap animation-timing-function,
wat die spoed van die animasie spesifiseer
die eienskap animation-direction,
wat die rigting van die animasie spesifiseer
die eienskap animation-fill-mode,
wat die toestand van die animasie spesifiseer
die eienskap animation-play-state,
wat toelaat om die animasie te pauzeer
die eienskap animation,
wat 'n kortvorm vir animasies is
die opdrag @keyframes,
wat die sleutelframes van die animasie spesifiseer
gladde oorgange transition, wat animasies is wat by element-oorbeweging aktiveer