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