Eigenschap animation-direction

De eigenschap animation-direction bepaalt de richting van de animatie. Standaard herhaalt de animatie zich slechts 1 keer en keert dan terug naar de oorspronkelijke staat, vervolgens, als er een vertraging animation-delay is ingesteld, wacht het de opgegeven tijd en dan begint de cyclus opnieuw.

Deze eigenschap maakt het mogelijk om dit gedrag te veranderen, bijvoorbeeld zodat de animatie na afloop blijft waar ze is geëindigd, en niet terugspringt naar de beginpositie.

Je kunt ook het volgende gedrag instellen: de animatie gaat naar het uiterste punt en keert dan terug (zoals in transition). Zie de beschrijving hieronder.

Syntaxis

selector {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Waarden

Waarde	Beschrijving
`reverse`	De animatie wordt afgespeeld in omgekeerde richting.
`alternate`	De animatie wordt eerst in de voorwaartse richting afgespeeld, en dan in de omgekeerde richting (zoals transition).
`alternate-reverse`	De animatie wordt afgespeeld van de eindpositie naar de beginpositie en terug. In wezen zijn de waarden `alternate` en `reverse` in één.
`normal`	De animatie wordt afgespeeld van begin tot eind, en na voltooiing springt deze abrupt terug naar de beginpositie.

Standaardwaarde: normal.

Voorbeeld

Nu beweegt het element in de ene richting, en keert dan terug, omdat de waarde alternate is ingesteld. Hierbij heeft animation-duration een waarde van 3 seconden en dit betekent dat de verplaatsingen "heen" en "terug" elk 3 seconden duren:

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

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

#elem {
	animation-direction: alternate;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld

Nu beweegt het element in de omgekeerde richting (zou van links naar rechts moeten, maar zal van rechts naar links gaan):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Voorbeeld

Nu beweegt het element heen en weer, maar in de omgekeerde richting (zou moeten beginnen aan de linkerkant, maar zal beginnen aan de rechterkant):

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

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

#elem {
	animation-direction: alternate-reverse;
	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,
dat de naam van de animatie instelt
eigenschap animation-duration,
dat de duur van de animatie instelt
eigenschap animation-delay,
dat de vertraging voor het uitvoeren van de animatie instelt
eigenschap animation-timing-function,
dat de snelheid van de animatie instelt
eigenschap animation-iteration-count,
dat het aantal herhalingen van de animatie instelt
eigenschap animation-fill-mode,
dat de staat van de animatie instelt
eigenschap animation-play-state,
dat het mogelijk maakt de animatie te pauzeren
eigenschap animation,
dat een verkorte notatie voor animaties is
commando @keyframes,
dat de keyframes van de animatie instelt
vloeiende overgangen transition, die animatie bij hover op een element vertegenwoordigen