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.
Initialwert | normal |
---|---|
Anwendbar auf | alle Elemente, ::before und ::after Pseudoelemente |
Vererbt | Nein |
Medien | visuell |
Berechneter Wert | wie angegeben |
Animierbar | Nein |
Kanonische Reihenfolge | die 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 eineease-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
Schlagwörter:
Mitwirkende an dieser Seite:
Sebastianz
Zuletzt aktualisiert von:
Sebastianz,