Eigenschap animation-fill-mode

De eigenschap animation-fill-mode bepaalt in welke positie animaties stoppen na beëindiging. Standaard keert een animatie terug naar de oorspronkelijke waarde en dit kan er niet erg mooi uitzien.

Syntaxis

selector {
	animation-fill-mode: backwards | forwards | both | none;
}

Waarden

Waarde	Beschrijving
`none`	Als er een animatievertraging is ingesteld - dan gedurende de vertragingstijd blijft het element op zijn plaats, en springt dan naar het `0%` frame. Na het beëindigen van de animatie blijft het element niet in de toestand, waar het stopte, maar springt terug naar de begintoestand.
`backwards`	Laat het element na het laden van de pagina naar het `0%` frame bewegen, zelfs als er een vertraging is ingesteld `animation-delay`, en daar blijven totdat de animatie begint. Na het beëindigen van de animatie blijft het element niet in de toestand waar het stopte, maar springt terug naar de begintoestand.
`forwards`	Geeft de browser aan dat na het beëindigen van de animatie het element blijft in de toestand waar het stopte.
`both`	Combineert backwards en forwards - na het laden van de pagina wordt het element ingesteld op het `0%` frame, en na het beëindigen van de animatie blijft het element waar het stopte.

Standaardwaarde: none.

Voorbeeld . Waarde none

In dit voorbeeld is margin-left ingesteld op de waarde 300px voor het element, en voor het eerste animatieframe - op 0px. Omdat er geen vertraging animation-delay is, zal het element na het laden van de pagina op 0px staan, en niet op 300px. Bovendien zal de animatie na beëindiging terugspringen naar de beginwaarde:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld . Waarde none

In dit voorbeeld is margin-left ingesteld op de waarde 300px voor het element, en voor het eerste animatieframe - op 0px. Ook is er een vertraging animation-delay van 3 seconden ingesteld voor het element, daarom zal het element na het laden van de pagina op 300px staan, en niet op 0px, en zal daar 3 seconden blijven staan na het starten van de animatie en dan met een sprong naar 0px gaan - en de animatie start vandaar. Bovendien zal de animatie na beëindiging terugspringen naar de beginwaarde:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld . Waarde backwards

In dit voorbeeld is margin-left ingesteld op de waarde 300px voor het element, en voor het eerste animatieframe - op 0px. Ook is animation-fill-mode ingesteld op de waarde backwards, daarom zal het element na het laden van de pagina op 0px staan, en niet op 300px, zoals het was voor animation-fill-mode met de waarde none. Bovendien zal de animatie na beëindiging terugspringen naar de beginwaarde:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld . Waarde none en aantal herhalingen gelijk aan 1

In dit voorbeeld is margin-left ingesteld op de waarde 300px voor het element, en voor het eerste animatieframe - op 0px. Ook is er een vertraging animation-delay van 3 seconden ingesteld voor het element, daarom zal het element na het laden van de pagina op 300px staan, en niet op 0px, en zal daar 3 seconden blijven staan na het starten van de animatie en dan met een sprong naar 0px gaan - en de animatie start vandaar. Omdat animation-fill-mode ingesteld is op de waarde none, zal het element na het afspelen van de animatie terugkeren naar de beginwaarde:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld . Waarde forwards en aantal herhalingen gelijk aan 1

In dit voorbeeld is animation-fill-mode ingesteld op de waarde forwards, en het aantal herhalingen van de animatie - op 1. Na het afspelen van de animatie blijft het element in de positie waar de animatie eindigde, en springt niet terug naar het startpunt.

Bovendien is margin-left ingesteld op de waarde 300px voor het element, en voor het eerste animatieframe - op 0px. Ook is er een vertraging animation-delay van 3 seconden ingesteld voor het element, daarom zal het element na het laden van de pagina op 300px staan, en niet op 0px, en zal daar 3 seconden blijven staan na het starten van de animatie, en dan met een sprong naar 0px gaan - en de animatie start vandaar:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld . Waarde both en aantal herhalingen gelijk aan 1

In dit voorbeeld is animation-fill-mode ingesteld op de waarde both, en het aantal herhalingen van de animatie - op 1. Na het laden van de pagina zal het element staan in het eerste animatieframe (op 0px, en niet op 300px), en na het afspelen van de animatie blijft het element in de positie waar de animatie eindigde, en springt niet terug naar het startpunt:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Zie ook

de eigenschap animation-name,
die de naam van de animatie instelt
de eigenschap animation-duration,
die de duur van de animatie instelt
de eigenschap animation-delay,
die de vertraging voor het uitvoeren van de animatie instelt
de eigenschap animation-timing-function,
die de snelheid van de animatie instelt
de eigenschap animation-iteration-count,
die het aantal herhalingen van de animatie instelt
de eigenschap animation-direction,
die de richting van de animatie instelt
de eigenschap animation-play-state,
die het mogelijk maakt de animatie te pauzeren
de eigenschap animation,
dat een verkorte notatie voor animaties is
de regel @keyframes,
die de keyframes van de animatie instelt
vloeiende overgangen transition, die animatie bij hover op een element vertegenwoordigen