W3docs
de
Anmelden

CSS `animation-direction`-Eigenschaft

The CSS animation-direction property sets how an animation should be played: forwards, backwards or in alternate cycles. See examples and practice yourself.

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

Wenn für eine beliebige Animationseigenschaft mehrere durch Kommas getrennte Werte angegeben werden, werden sie in der Reihenfolge auf die entsprechenden Animationen angewendet, die in animation-name definiert sind.

Die Eigenschaft animation-direction ist eine der CSS3-Eigenschaften.

Anfangswertnormal
Gilt fürAlle Elemente. Gilt auch für ::before und ::after Pseudo-Elemente.
VererbbarNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.animationDirection = "reverse"

Syntax

Syntax der CSS animation-direction-Eigenschaft

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

Beispiel zur animation-direction-Eigenschaft:

Beispiel zur 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 zur animation-direction-Eigenschaft mit dem Wert "reverse":

Beispiel zur 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 zur animation-direction-Eigenschaft mit dem Wert "alternate":

Beispiel zur 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 zur animation-direction-Eigenschaft mit dem Wert "alternate-reverse":

Beispiel zur 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 »

Werte

WertBeschreibungAbspielen
normalStandardwert. Die Animation wird vorwärts abgespielt.Abspielen »
reverseDie Animation wird rückwärts abgespielt. Bei jedem Start wird sie vom Ende zurückgesetzt und beginnt von vorn. Die Timing-Funktion wird ebenfalls umgekehrt.Abspielen »
alternateZuerst bewegt sich die Animation vorwärts, dann rückwärts. Erfordert animation-iteration-count ≥ 2, um sichtbar zu sein.Abspielen »
alternate-reverseZuerst bewegt sich die Animation rückwärts, dann vorwärts. Erfordert animation-iteration-count ≥ 2, um sichtbar zu sein.Abspielen »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft vom übergeordneten Element.

Praxis

Übung

Welche möglichen Werte hat die CSS-Eigenschaft animation-direction?