CSS Property animation-direction

The animation-direction property controls how to play the animation: in reverse or on alternate cycles.

Summary

Initial value: normal
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.animationDirection="reverse"
Animatable: no

CSS Syntax

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

Property Values

normal(Default): play animation in normal way
reverse: play animation in reverse direction
alternate: play animation as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)
alternate-reverse: play animation in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)

Browser compatibility


`animation-direction`	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit- (12.0 -o-)

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--  w ww.  ja va 2s .  c  om-->
    width: 100px;
    height: 100px;
    background: black;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: white; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: white; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

Click to view the demo