animation-direction

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Ü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
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung (Ja)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10 #
4.0-webkit
reverse 19 16.0 (16.0) 10 Nicht unterstützt Nicht unterstützt
alternate-reverse 19 16.0 (16.0) 10 Nicht unterstützt Nicht unterstützt
Merkmal Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? (Ja)-webkit 5.0 (5.0)-moz
16.0 (16.0)
? ? ?
reverse Nicht unterstützt (Ja)-webkit 16.0 (16.0) ? ? Nicht unterstützt
alternate-reverse ? (Ja)-webkit 16.0 (16.0) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz
 Zuletzt aktualisiert von: Sebastianz,