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 im Wechsel vorwärts und rückwärts abgespielt 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 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 bei jedem Zyklus vorwärts abgespielt. Das bedeutet, dass die Animation bei jedem Zyklus auf den Anfangszustand zurückgesetzt wird und neu beginnt. Dies ist der Standardwert.

reverse

Die Animation wird bei jedem Zyklus rückwärts abgespielt. Das bedeutet, dass die Animation bei jedem Zyklus auf den Endzustand zurückgesetzt wird und neu beginnt. Animationsschritte werden rückwärts ausgeführt, und auch die Funktionen für das Zeitverhalten werden umgekehrt. Beispielsweise wird eine ease-in Funktion zu ease-out.

alternate

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

alternate-reverse

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

Hinweis: Wenn Sie mehrere durch Kommas getrennte Werte bei einer animation-* Eigenschaft angeben, werden diese in der Reihenfolge angewendet, in der die animation-names erscheinen. Für Situationen, in denen die Anzahl der Animationen und die animation-* Eigenschaftswerte nicht übereinstimmen, siehe Festlegen mehrerer Animationswerte.

Hinweis: Beim Erstellen von CSS-Scroll-basierten Animationen funktioniert die Angabe einer animation-direction wie erwartet, z. B. bewirkt reverse, dass die Animation rückwärts im Verlauf der Zeitachse ablä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

Siehe auch