Beispiel
Haben die Animation einmal, dann tun Sie die Animation rückwärts:
div {
-webkit-animation-direction: alternate; /* Chrome, Safari,
Opera */
animation-direction: alternate;
} Versuch es selber " Definition und Verwendung
Die Animation-Richtung Eigenschaft legt fest, ob eine Animation in umgekehrter Richtung oder in wechselnden Zyklen spielen.
| Standardwert: | normal |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.animationDirection="reverse" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| animation-direction | 43.0 4.0 -webkit- | 10.0 | 16.0 5,0 -moz- | 9.0 4.0 -webkit- | 30.0 15,0 -webkit- 12.0 -o- |
CSS-Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| normal | Standardwert. Die Animation sollte normal zu Ende gespielt werden | Spiel es " |
| reverse | Die Animation sollte in umgekehrter Richtung spielen | Spiel es " |
| alternate | Die Animation wird als normal jede ungerade Zeit gespielt werden (1,3,5,etc..) und in umgekehrter Richtung jedes noch Zeit (2,4,6,etc...) | Spiel es " |
| alternate-reverse | Die Animation wird in umgekehrter Richtung jede ungerade Zeit gespielt werden (1,3,5,etc..) und in einer normalen Richtung jeder einmal Zeit (2,4,6,etc...) | Spiel es " |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Hinweis: Die "reverse" und "alternate-reverse" Werte werden nicht in Safari unterstützt.
Verwandte Seiten
CSS3 Tutorial: CSS3 Animationen
HTML - DOM - Referenz: animationDirection property