Egenskapen animation-iteration-count

Egenskapen animation-iteration-count anger antalet upprepningar av animationen. Som standard upprepas animationen bara 1 gång och återgår sedan till ursprungligt tillstånd. Vår egenskap tillåter oss dock att ange ett specifikt antal upprepningar eller till och med ange oändlig upprepning.

Syntax

selektor {
	animation-iteration-count: heltal eller decimaltal | infinite;
}

Värden

Värde	Beskrivning
Nummer	Angivet antal upprepningar, efter vilka animationen stoppas. Positionen den intar regleras av egenskapen `animation-fill-mode`. Decimalvärden kan anges - i detta fall kommer animationen endast att spelas upp delvis.
`infinite`	Animationen kommer att upprepas oändligt.

Standardvärde: 1.

Exempel . Ändligt antal upprepningar

I detta exempel upprepas animationen endast 3 gånger, och återgår sedan till ursprungligt tillstånd:

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

Exempel . Värdet infinite

Och nu kommer animationen att upprepas oändligt:

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

Se även

egenskapen animation-name,
som anger animationens namn
egenskapen animation-duration,
som anger animationens varaktighet
egenskapen animation-delay,
som anger fördröjningen innan animationen utförs
egenskapen animation-timing-function,
som anger hastigheten för animationens utförande
egenskapen animation-direction,
som anger animationens riktning
egenskapen animation-fill-mode,
som anger animationens tillstånd
egenskapen animation-play-state,
som möjliggör att pausa animationen
egenskapen animation,
som är en förkortning för animationer
kommandot @keyframes,
som anger animationens nyckelrutor
mjuka övergångar transition, som är en animation vid hovring över ett element