CSS animation-direction Eigenschaft

Die CSS animation-direction Eigenschaft legt fest, wie eine Animation abgespielt werden soll: vorwärts, rückwärts oder in alternierenden Zyklen. Der Standardwert ist normal.

Diese Seite erklärt, was jeder Wert bewirkt, wie man ihn zusammen mit den übrigen Animationseigenschaften einsetzt und welche häufigen Fallstricke es gibt (z. B. warum alternate scheinbar nicht funktioniert, bis man die Iterationsanzahl erhöht).

Was animation-direction steuert

Wenn Sie eine Animation mit @keyframes definieren, beschreibt die Regel einen einzigen Durchlauf von 0% bis 100%. Die animation-direction Eigenschaft legt fest, in welche Richtung jede Iteration diese Timeline abspielt:

Vorwärts — von 0% bis 100% (die natürliche Lesereihenfolge Ihrer Keyframes).
Rückwärts — von 100% bis 0%, was auch die Timing-Funktion umkehrt (ein ease-in wird als ease-out abgespielt).
Alternierend — ungerade und gerade Iterationen laufen in entgegengesetzten Richtungen, sodass das Element reibungslos hin und zurück bewegt wird, ohne einen Sprung.

So können Sie einen einzigen Satz Keyframes schreiben und einen Hin-und-Her-„Ping-Pong"-Effekt kostenlos erhalten, anstatt den Rückweg manuell zu gestalten.

Wenn für eine Animationseigenschaft mehrere kommagetrennte Werte angegeben sind, werden sie der Reihe nach auf die in animation-name definierten Animationen angewendet.

Die animation-direction Eigenschaft gehört zu den CSS3-Eigenschaften und wird üblicherweise zusammen mit animation-iteration-count, animation-duration und den anderen Langformen oder als Teil der animation Kurzschreibweise gesetzt.

Anfangswert	normal
Gilt für	Alle Elemente, gilt auch für ::before- und ::after-Pseudoelemente.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.animationDirection = "reverse"

Syntax

Syntax der CSS animation-direction Eigenschaft

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Beispiel der animation-direction Eigenschaft:

Beispiel der CSS animation-direction Eigenschaft mit dem Wert normal

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Beispiel der animation-direction Eigenschaft mit dem Wert "reverse":

Beispiel der CSS animation-direction Eigenschaft mit dem Wert reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>In this example the animation plays as reverse.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Beispiel der animation-direction Eigenschaft mit dem Wert "alternate":

Beispiel der CSS animation-direction Eigenschaft mit dem Wert alternate

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays first forwards, then backwards.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Beispiel der animation-direction Eigenschaft mit dem Wert "alternate-reverse":

Beispiel der CSS animation-direction Eigenschaft mit dem Wert alternate-reverse

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate-reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards, then forwards.</p>
    <div></div>
  </body>
</html>

Probier es selbst »

Verwendung in der animation Kurzschreibweise

animation-direction ist nur ein Teil einer Animation. Sie können es einzeln setzen, wird aber am häufigsten als Teil der animation Kurzschreibweise geschrieben, wobei das Richtungs-Keyword an beliebiger Stelle unter den anderen Werten erscheinen kann:

/* name | duration | timing-function | iteration-count | direction */
animation: myfirst 5s ease-in-out 2 alternate;

Beide nachfolgenden Regeln beschreiben genau dieselbe Animation:

/* Longhand */
.box {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

/* Shorthand — equivalent */
.box {
  animation: myfirst 5s 2 alternate;
}

Häufige Fallstricke

alternate benötigt mehr als eine Iteration. Mit dem Standardwert animation-iteration-count: 1 läuft die Animation nur einmal, daher findet der „Rückweg" nie statt, und alternate sieht identisch wie normal aus. Setzen Sie die Anzahl auf 2 (oder höher, oder infinite), um den Effekt zu sehen.
reverse ist nicht dasselbe wie alternate. reverse spielt jede Iteration vom Ende zum Anfang ab; alternate wechselt die Richtung bei jeder Iteration. Verwenden Sie reverse, um Keyframes dauerhaft rückwärts abzuspielen, und alternate für eine Hin-und-Her-Schleife.
Die Timing-Funktion kehrt sich ebenfalls um. Wenn eine Iteration rückwärts abgespielt wird, wird ihre Timing-Funktion gespiegelt, was das Easing an den Wendepunkten visuell konsistent hält.

Werte

Wert	Beschreibung	Vorschau
normal	Das ist der Standardwert; die Animation spielt vorwärts.	Vorschau »
reverse	Die Animation spielt rückwärts. Bei jedem Neustart der Animation wird sie auf das Ende zurückgesetzt und beginnt von vorne. Die Timing-Funktion wird ebenfalls umgekehrt.	Vorschau »
alternate	Die Animation bewegt sich zunächst vorwärts, dann rückwärts. Erfordert `animation-iteration-count` ≥ 2, um sichtbar zu sein.	Vorschau »
alternate-reverse	Die Animation bewegt sich zunächst rückwärts, dann vorwärts. Erfordert `animation-iteration-count` ≥ 2, um sichtbar zu sein.	Vorschau »
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Welche Werte sind für die CSS animation-direction Eigenschaft möglich?