animation-direction

Übersicht

Die animation-direction CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.

Es ist oft einfacher, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

Initialwertnormal
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

/* Einzelne Animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Mehrere Animationen */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Globale Werte */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

Werte

normal
Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.
alternate
Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine ease-in Animation durch eine ease-out Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.
reverse
Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.
alternate-reverse
Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.

Formale Syntax

<single-animation-direction>#

wobei
<single-animation-direction> = normal | reverse | alternate | alternate-reverse

Beispiele

Siehe CSS Animationen für Beispiele.

Spezifikationen

Spezifikation Status Kommentar
CSS Animations
Die Definition von 'animation-direction' in dieser Spezifikation.
Arbeitsentwurf For the two new values, see the W3C discussion.

Browser Kompatibilität

BCD tables only load in the browser

Siehe auch