CSS animation-direction Property

The CSS animation-direction property sets how an animation should be played: forwards, backwards or in alternate cycles. The default value is normal. Each time you run the animation, it will reset to the beginning state and start over.

Initial Value normal
Applies to All elements, It also applies to ::before and ::after pseudo-elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.animationDirection = "reverse"

Syntax

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

Example

<!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;}
      25%  {background: #1c87c9; left: 200px;}
      50%  {background: #030E10; left: 200px;}
      75%  {background: #666; left: 0px;}
      100% {background: #8ebf42; left: 0px;}
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards.</p>
    <div></div>
  </body>
</html>

Here is another example, when the animation moved reversed.

Example

<!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 the animation plays as reverse.</p>
    <div></div>
  </body>
</html>

Here is another example where the animation moved alternate.

Example

<!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>

See another example, when the animation moved alternate-reversed.

Example

<!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>Animation-direction example</h2>
    <p>Here the animation plays backwards, then forwards.</p>
    <div></div>
  </body>
</html>

Values

Value Description
normal It is the default value, when the animation plays forward. Each time you run the animation, it will reset to the beginning state and start over.
reverse The animation plays backwards. Each time you run the animation, it will reset to the end and start over. Timing function is also reversed.
alternate At first the animation moves forwards, then backwards.
alternate-reverse At first the animation moves backwards, then forwards.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Related Resources

Animation, @keyframes, background, background-color, height, width, animation-timing-function, animation-name, animation-duration, animation-delay.




Related articles