CSS animation-direction

The CSS animation-direction property is used to define the direction of an animation. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div#mydiv {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 4s; animation-iteration-count: infinite;
         animation-direction: reverse; }
      @keyframes fresherearth {
         0% {left: 0px; top: 0px;}
         25% {left: 220px; top: 0px;}
         50% {left: 220px; top: 220px;}
         75% {left: 0px; top: 220px;}
         100% {left: 0px; top: 0px;}
      }
   </style>
</head>
<body>

   <div id="mydiv"></div>
   
</body>
</html>

Output

The original order of the animation is, the DIV box goes to right -> right bottom -> left bottom -> left. But due to animation-direction: reverse;, the animation plays reversely.

Note - The animation-name is used to define a name for an animation.

Note - The animation-duration is used to define time to complete one iteration or cycle of an animation.

Note - The animation-iteration-count is used to define the total number of iterations or cycles for an animation to play.

Note - The @keyframes is used to define the change in styles for multiple times in one cycle of selected animation.

CSS animation-direction Syntax

The syntax of animation-direction property in CSS, is:

animation-direction: x;

The value of x should be any of the following:

normal - used to play normal animation. This is the default value.
reverse - used to play animation in reverse
alternate - used to play normal animation for first iteration, then reverse animation for second iteration, then normal for third, reverse for fourth, and so on
alternate-reverse - same as alternate, but starts with reverse
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS animation-direction: alternate Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div#mydiv {width: 50px; height: 50px; border-radius: 50%;
         background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 4s; animation-iteration-count: infinite;
         animation-direction: alternate; }
      @keyframes fresherearth {
         0% {left: 0px; top: 0px;}
         25% {left: 220px; top: 0px;}
         50% {left: 220px; top: 220px;}
         75% {left: 0px; top: 220px;}
         100% {left: 0px; top: 0px;}
      }
   </style>
</head>
<body>

   <div id="mydiv"></div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »