Ü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
Animationstypdiskret
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 43
Vollständige Unterstützung 43
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 30
Vollständige Unterstützung 30
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 12.1 — 15
Keine Unterstützung 12 — 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 43
Vollständige Unterstützung 43
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 43
Vollständige Unterstützung 43
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Vollständige Unterstützung 5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Opera Android Vollständige Unterstützung 30
Vollständige Unterstützung 30
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Keine Unterstützung 12.1 — 14
Keine Unterstützung 12 — 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari iOS Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 4.0
Vollständige Unterstützung 4.0
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
reverseChrome Vollständige Unterstützung 19Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 16IE Vollständige Unterstützung 10Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 16Opera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung Ja
alternate-reverseChrome Vollständige Unterstützung 19Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 16IE Vollständige Unterstützung 10Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android ? Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 16Opera Android ? Safari iOS ? Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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