Eigenschap animation-iteration-count

De eigenschap animation-iteration-count specificeert het aantal herhalingen van een animatie. Standaard wordt een animatie slechts 1 keer herhaald en keert dan terug naar de oorspronkelijke staat. Onze eigenschap maakt het echter mogelijk om een bepaald aantal herhalingen in te stellen of zelfs oneindige herhaling in te stellen.

Syntaxis

selector {
	animation-iteration-count: geheel of decimaal getal | infinite;
}

Waarden

Waarde	Beschrijving
Getal	Het opgegeven aantal herhalingen, waarna de animatie stopt. De positie die het zal innemen, wordt gereguleerd door de eigenschap `animation-fill-mode`. Decimale waarden zijn mogelijk - in dat geval wordt de animatie slechts gedeeltelijk afgespeeld.
`infinite`	De animatie wordt oneindig herhaald.

Standaardwaarde: 1.

Voorbeeld . Eindig aantal herhalingen

In dit voorbeeld wordt de animatie slechts 3 keer herhaald, en keert dan terug naar de oorspronkelijke staat:

<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

En nu wordt de animatie oneindig herhaald:

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

Zie ook

eigenschap animation-name,
die de naam van de animatie specificeert
eigenschap animation-duration,
die de duur van de animatie specificeert
eigenschap animation-delay,
die de vertraging vóór het uitvoeren van de animatie specificeert
eigenschap animation-timing-function,
die de snelheid van de animatie specificeert
eigenschap animation-direction,
die de richting van de animatie specificeert
eigenschap animation-fill-mode,
die de staat van de animatie specificeert
eigenschap animation-play-state,
die het mogelijk maakt de animatie te pauzeren
eigenschap animation,
dat een verkorte notatie voor animaties is
commando @keyframes,
dat de keyframes van de animatie specificeert
vloeiende overgangen transition, die een animatie bij hover op een element vertegenwoordigen