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

Initialer Wertnormal
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

BCD tables only load in the browser

Siehe auch