CSS - animation-direction Property

The CSS property animation-direction decides the direction that an animation follows: either forwards, backwards or alternating between these two directions, creating a back and forth movement.

Using the shorthand property animation is a common and simple way to configure all animation properties at once.

Possible Values

normal - The animation progresses in the forward direction with each cycle. When the animation has completed a cycle, it essentially resets to the initial state and starts again. This behavior is the default setting.
reverse - During each cycle, the animation runs backwards. This means that once a cycle has been completed, the animation is reset to its final state and starts again.

The steps of the animation run backwards, including the reversal of easing functions.
alternate - Each cycle of the animation alternately changes direction, starting with the first iteration, which moves forward. The count to distinguish between even and odd cycles starts at one.
alternate-reverse - In each cycle of the animation, the direction changes, starting with the first iteration that moves backwards. The count to differentiate between even and odd cycles starts at one.

Note: When multiple comma-separated values on an animation-* property is specified, the values are applied to the animations in the order in which the animation-names appear.

Note: While defining the CSS scroll-driven animations, the value of animation-iteration-count determines the number of times the animation is repeated over the course of timeline's progress. In case no value is specified for animation-iteration-count, the animation is executed only once. infinte is a valid value, but may result in an unworkable animation in case of CSS scroll-driven animation.

Syntax

animation-direction = <single-animation-direction>#  

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

Applies To

All the HTML elements, ::before and ::after pseudo-elements.

CSS animation-direction - normal Value

The following example demonstrates animation-direction with value as normal.

The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value normal is used.
The normal causes the animation to run forward.

<html>
<head>
<style>
   /* Centering the content vertically and horizontally */
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   /* Styling the container for the boxes */
   .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
   }

   /* Styling for the box with 'normal' animation */
   .normal-box {
      width: 100px;
      height: 100px;
      margin: 20px; 
      background-color: #3498db;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: moveNormal;
      animation-direction: normal; /* Animation moves continuously from start to end */
   }
   
   /* Keyframes for the 'moveNormal' animation */
   @keyframes moveNormal {
      from {
      transform: translateX(0);
      }
      to {
      transform: translateX(200px); /* Moves the box horizontally to the right */
      }
   }
</style>
</head>
<body>
<div class="container">
   <div class="normal-box"></div> <!-- Box with 'normal' animation -->
</div>
</body>
</html>

CSS animation-direction - alternate Value

The following example demonstrates animation-direction with value as alternate.

The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value alternate is used.
The alternate causes the animation to run back and forth.

<html>
<head>
<style>
   /* Centering the content vertically and horizontally */
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   /* Styling the container for the boxes */
   .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
   }

   /* Styling for the box with 'alternate' animation */
   .alternate-box {
      width: 100px;
      height: 100px;
      margin: 20px;
      background-color: #e74c3c; 
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: moveAlternate;
      animation-direction: alternate; /* Animation oscillates back and forth */
   }
   
   /* Keyframes for the 'moveAlternate' animation */
   @keyframes moveAlternate {
      from {
      transform: translateX(0);
      }
      to {
      transform: translateX(200px); /* Moves the box back and forth horizontally */
      }
   }
</style>
</head>
<body>
<div class="container">
   <div class="alternate-box"></div> <!-- Box with 'alternate' animation -->
</div>
</body>
</html>

CSS animation-direction - reverse Value

The following example demonstrates animation-direction with value as reverse.

The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value reverse is used.
The reverse causes the animation to run backwards each cycle.

<html>
<head>
<style>
   /* Centering the content vertically and horizontally */
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   /* Styling the container for the boxes */
   .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
   }

   /* Styling for the box with 'reverse' animation */
   .reverse-box {
      width: 100px;
      height: 100px;
      margin: 20px;
      background-color: #e74c3c; 
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: moveReverse;
      animation-direction: reverse; /* Animation oscillates backwards */
   }
   
   /* Keyframes for the 'moveReverse' animation */
   @keyframes moveReverse {
      from {
      transform: translateX(0);
      }
      to {
      transform: translateX(200px); /* Moves the box back and forth horizontally */
      }
   }
</style>
</head>
<body>
<div class="container">
   <div class="reverse-box"></div> <!-- Box with 'reverse' animation -->
</div>
</body>
</html>

CSS animation-direction - alternate-reverse Value

The following example demonstrates animation-direction with value as alternate-reverse.

The CSS animation-direction property determines how an animation runs through its keyframes.
In this example, the value alternate-reverse is used.
The reverse causes the animation to reverse its direction each cycle.

<html>
<head>
<style>
   /* Centering the content vertically and horizontally */
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
   }
   /* Styling the container for the boxes */
   .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
   }

   /* Styling for the box with 'alternate-reverse' animation */
   .alt-reverse-box {
      width: 100px;
      height: 100px;
      margin: 20px;
      background-color: #e74c3c; 
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: moveAltReverse;
      animation-direction: alternate-reverse; /* Animation oscillates backwards and then changes the direction */
   }
   
   /* Keyframes for the 'moveAltReverse' animation */
   @keyframes moveAltReverse {
      from {
      transform: translateX(0);
      }
      to {
      transform: translateX(200px); /* Moves the box back and forth horizontally */
      }
   }
</style>
</head>
<body>
<div class="container">
   <div class="alt-reverse-box"></div> <!-- Box with 'alternate-reverse' animation -->
</div>
</body>
</html>