The animation-direction property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.

  • Initial valuenormal
  • Applies toAll elements, :before and :after pseudo elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.animationDirection
Formal syntax: <single-animation-direction> [ ',' <single-animation-direction> ]*

animation-direction: normal; 
animation-direction: reverse; 
animation-direction: alternate; 
animation-direction: alternate-reverse; 
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
  • normalAll iterations of the animation are played as specified.
  • reverseAll iterations of the animation are played in the reverse direction from the way they were specified.
  • alternateThe animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
  • alternate-reverseThe animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.
.class {
   animation-direction: alternate;
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.