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

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
  <button id="play-pause">Play</button>
</section>

#example-element {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-play-state: paused;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

#example-element.running {
  animation-play-state: running;
}

#play-pause {
  font-size: 2rem;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

"use strict";

window.addEventListener("load", () => {
  const el = document.getElementById("example-element");
  const button = document.getElementById("play-pause");

  button.addEventListener("click", () => {
    if (el.classList.contains("running")) {
      el.classList.remove("running");
      button.textContent = "Play";
    } else {
      el.classList.add("running");
      button.textContent = "Pause";
    }
  });
});

Es ist oft praktisch, die Kurzform-Eigenschaft 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 spielt vorwärts in jedem Zyklus. Das bedeutet, jedes Mal, wenn die Animation erneut abgespielt wird, wird sie in ihren Anfangszustand zurückgesetzt und startet von Neuem. Dies ist der Standardwert.

reverse

Die Animation spielt rückwärts in jedem Zyklus. Das bedeutet, jedes Mal, wenn die Animation erneut abgespielt wird, wird sie in ihren Endzustand zurückgesetzt und startet von Neuem. Animationsschritte werden rückwärts ausgeführt, und Abmilderungsfunktionen werden ebenfalls umgekehrt. Zum Beispiel wird eine ease-in Abmilderungsfunktion zu ease-out.

alternate

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

alternate-reverse

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

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte in 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 Animationswerte.

Hinweis: Bei der Erstellung von CSS scroll-basierten Animationen funktioniert die Angabe einer animation-direction wie erwartet, zum Beispiel führt reverse dazu, dass die Animation rückwärts im Laufe des Fortschritts der Timeline abläuft. Ein Wert von alternate (in Verbindung mit einer animation-iteration-count) führt dazu, dass die Animation vorwärts und rückwärts abläuft, während die Timeline 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

Umkehren 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

Siehe auch