Eigenschaft animation-direction

Die Eigenschaft animation-direction legt die Richtung der Animation fest. Standardmäßig wird die Animation nur 1 Mal wiederholt und kehrt dann in den Ausgangszustand zurück. Wenn dann eine Verzögerung animation-delay angegeben ist, wartet sie die angegebene Zeit und dann beginnt der Zyklus von Neuem.

Diese Eigenschaft ermöglicht es, dieses Verhalten zu ändern, zum Beispiel so, dass die Animation nach dem Ende dort bleibt, wo sie geendet hat, und nicht in die Ausgangsposition zurückspringt.

Man kann auch ein Verhalten festlegen, bei dem die Animation den Endpunkt erreicht und dann zurückkehrt (ähnlich wie bei transition). Siehe die Beschreibung unten.

Syntax

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

Werte

Wert	Beschreibung
`reverse`	Die Animation wird in umgekehrter Richtung abgespielt.
`alternate`	Die Animation wird zuerst in der normalen Richtung und dann in umgekehrter Richtung abgespielt (wie transition).
`alternate-reverse`	Die Animation wird von der Endposition zur Startposition und zurück abgespielt. Im Wesentlichen sind dies die Werte `alternate` und `reverse` in einem.
`normal`	Die Animation wird vom Anfang bis zum Ende abgespielt, und nach Beendigung springt sie abrupt in die Ausgangsposition zurück.

Standardwert: normal.

Beispiel

Jetzt bewegt sich das Element in eine Richtung und kehrt dann zurück, da der Wert alternate angegeben ist. Dabei hat animation-duration einen Wert von 3 Sekunden, was bedeutet, dass die Bewegungen "hin" und "zurück" jeweils 3 Sekunden dauern:

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

Beispiel

Jetzt bewegt sich das Element in die entgegengesetzte Richtung (sollte von links nach rechts, wird aber von rechts nach links):

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

Beispiel

Jetzt bewegt sich das Element hin und her, aber in umgekehrter Richtung (sollte links beginnen, wird aber rechts beginnen):

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

Siehe auch

die Eigenschaft animation-name,
die den Namen der Animation angibt
die Eigenschaft animation-duration,
die die Dauer der Animation angibt
die Eigenschaft animation-delay,
die die Verzögerung vor der Ausführung der Animation angibt
die Eigenschaft animation-timing-function,
die die Geschwindigkeit der Ausführung der Animation angibt
die Eigenschaft animation-iteration-count,
die die Anzahl der Iterationen der Animation angibt
die Eigenschaft animation-fill-mode,
die den Zustand der Animation angibt
die Eigenschaft animation-play-state,
die das Anhalten der Animation ermöglicht
die Eigenschaft animation,
die eine Kurzschreibweise für Animationen darstellt
die Regel @keyframes,
die die Keyframes der Animation angibt
fließende Übergänge transition, die eine Animation beim Überfahren eines Elements darstellen