w3docs logo

CSS-Eigenschaft animation-direction

Die CSS-Eigenschaft animation-direction legt fest, wie eine Animation abgespielt werden soll: vorwärts, rückwärts oder in wechselnden Zyklen. Der Standardwert ist normal. Jedes Mal, wenn Sie die Animation ausführen, wird sie in den Anfangszustand zurückgesetzt und beginnt von Anfang an.

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

Syntax

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

Beispiel

<!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>Beispiel für animation-direction</h2>
    <p>Hier spielt die Animation rückwärts.</p>
    <div></div>
  </body>
</html>

Hier ist ein weiteres Beispiel, wenn sich die Animation vertauscht hat.

Beispiel

<!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>Beispiel für animation-direction</h2>
    <p>In diesem Beispiel spielt die Animation als Rückwärtsgang ab.</p>
    <div></div>
  </body>
</html>

Hier ist ein weiteres Beispiel, wo die Animation abwechselnd verschoben wird.

Beispiel

<!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>Beispiel für animation-direction</h2>
    <p>Hier spielt die Animation zuerst vorwärts, dann rückwärts.</p>
    <div></div>
  </body>
</html>

Sehen Sie ein anderes Beispiel, wenn die Animation abwechselnd verschoben wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: relative;
      animation: myfirst 5s 1;
      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>Beispiel für animation-direction</h2>
    <p>Hier spielt die Animation rückwärts, dann vorwärts.</p>
    <div></div>
  </body>
</html>

Werte

Wert Beschreibung
normal Es ist der Standardwert, wenn die Animation vorwärts abgespielt wird. Jedes Mal, wenn Sie die Animation ausführen, wird sie in den Anfangszustand zurückgesetzt und beginnt von Angang an.
reverse Die Animation wird rückwärts abgespielt. Jedes Mal, wenn Sie die Animation ausführen, wird sie auf das Ende zurückgesetzt und beginnt von Angang an. Die Timing-Funktion ist ebenfalls umgekehrt.
alternate Zuerst bewegt sich die Animation vorwärts, dann rückwärts.
alternate-reverse Zuerst bewegt sich die Animation rückwärts, dann vorwärts.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
43.0+
4.0-42.0 -webkit- 		16.0+
5.0-15.0 -moz- 		9.0+
5.1-8.0 -webkit- 		12.0+
15.0-29.0 -webkit-

Übe dein Wissen

Was sind die vier grundlegenden Verwendungen der CSS-Eigenschaft 'animation-direction'?
Finden Sie das nützlich?