CSS animation-direction Property

Course Recommendation:

Definition and Usage animation-direction

This property defines whether the animation should play in reverse alternately.alternateIf the animation-direction value is "

Note:If the animation is set to play only once, this property has no effect.

See also:

CSS3 Tutorial:CSS Animation

HTML DOM Reference Manual:animationDirection Property

Example

Pause animation:

div {
  animation-direction: alternate;
}

Try it yourself

CSS Syntax

animation-direction: normal|alternate;
Value Description Test
normal Default Value. The animation should play normally. Test
alternate The animation should play in reverse alternately. Test

Technical Details

Default Value: normal
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.animationDirection="alternate"

Browser Support

The numbers in the table indicate the first browser version that fully supports the property.

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version using the prefix.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-