animation-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die animation-direction CSS Eigenschaft legt fest, ob eine Animation vorwärts, rückwärts oder abwechselnd vorwärts und rückwärts gespielt werden soll.

Probieren Sie es aus

Es ist oft praktisch, die Kurzschreibweise animation zu verwenden, um alle Animationseigenschaften auf einmal festzulegen.

Syntax

css
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: revert;
animation-direction: revert-layer;
animation-direction: unset;

Werte

normal

Die Animation wird vorwärts bei jedem Zyklus abgespielt. Mit anderen Worten, jedes Mal, wenn der Animationszyklus neu beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt von vorne. Dies ist der Standardwert.

reverse

Die Animation wird rückwärts bei jedem Zyklus abgespielt. Mit anderen Worten, jedes Mal, wenn der Animationszyklus neu beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt von vorne. Die Animationsschritte werden rückwärts ausgeführt, und auch die Easing-Funktionen werden umgekehrt. Beispielsweise wird eine ease-in Easing-Funktion zu ease-out.

alternate

Die Animation wechselt mit jedem Zyklus die Richtung, wobei die erste Iteration vorwärts abgespielt wird. Die Zählung, um zu bestimmen, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.

alternate-reverse

Die Animation wechselt mit jedem Zyklus die Richtung, wobei die erste Iteration rückwärts abgespielt wird. Die Zählung, um zu bestimmen, ob ein Zyklus gerade oder ungerade ist, beginnt bei eins.

Hinweis: Wenn Sie mehrere kommagetrennte Werte auf einer animation-* Eigenschaft angeben, werden sie in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Fälle, in denen die Anzahl der Animationen und animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationsproperty-Werte.

Hinweis: Bei der Erstellung von CSS scroll-gesteuerten Animationen funktioniert die Angabe einer animation-direction wie erwartet, zum Beispiel bewirkt reverse, dass die Animation im Verlauf des Fortschritts der Zeitachse rückwärts läuft. Ein Wert von alternate (kombiniert mit einer animation-iteration-count) bewirkt, dass die Animation vorwärts und rückwärts verläuft, während die Zeitachse fortschreitet.

Formale Definition

Anfangswertnormal
Anwendbar aufalle Elemente, ::before und ::after Pseudoelemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

animation-direction = 
<single-animation-direction>#

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

Beispiele

Umkehrung der Animationsrichtung

HTML

html
<div class="box"></div>

CSS

css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Ergebnis

Siehe CSS-Animationen für Beispiele.

Spezifikationen

Specification
CSS Animations Level 1
# animation-direction

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-direction
alternate
alternate-reverse
normal
reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch