CSS3 animation-direction Property

Here is a brief description of how to specify the direction for the animation to play in CSS3, that is to code whether the animation should run in reverse direction or in alternate cycles using the CSS3 animation-direction property.

Explanation

Property :

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


Where,
normal - Default value. The animation should be played as normal.
reverse - The animation should play in reverse direction.
alternate - The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)
alternate-reverse - The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.


NOTE: The "reverse" and "alternate-reverse" values are not supported in Safari.

Usage:


animation-direction: reverse;
animation-direction: alternate;

Definition:

The animation-direction property is used to let an animation run in reverse direction or alternate cycles.

It takes the following values.
  • reverse: infinite; : Run animation in reverse direction
  • alternate : Make the animation first run forward, then backward

Example :
<style>
.demodiv {
width: 50px;
height: 50px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3; animation-direction: reverse;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:violet; left:0px; top:0px;}
25% {background-color:indigo; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
} </style>
<div class='demodiv'></div>

Result:



The above example will run the animation in reverse direction.

Ask Questions

Ask Question