CSS3 animation-direction property
May 05, 2021 CSS Reference Manual
Table of contents
CSS reference manual
Definitions and usages
animation-direction: Properties
control how the animation is
reverse
in
alternate
or alternate
cycle.
If the animation-direction value is alternate, the animation plays normally in odd numbers (1, 3, 5, and so on) and back in even numbers (2, 4, 6, and so on).
Note: If you set the animation to play only once, the property has no effect.
| Default: | normal |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.animationDirection="alternate" |
Grammar
animation-direction: normal|reverse|alternate|alternate-reverse;
animation-direction: normal|reverse|alternate|alternate-reverse;
| Value |
Describe
|
Test |
| normal | Play the animation in a normal way | Test |
| reverse | Play the animation in the opposite direction | |
| alternate | Play the animation as normal per odd time (1,3,5, etc.) and reverse per even time (2,4,6, etc.... ） | Test |
| alternate-reverse | The animation plays in the opposite direction at each odd time (1,3,5, etc.) and in the normal direction of each even time (2,4,6, etc.). |
Pause animation:
{
animation-direction:alternate;
-webkit-animation-direction:alternate; / * Safari and Chrome * /
}
Try it out . . .
Browser support
| Attributes | |||||
|---|---|---|---|---|---|
| animation-direction |
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- |
Internet Explorer 10, Firefox, and Opera support the animation-direction property.
Safari and Chrome support alternative -webkit-animation-direction properties.
Note: The animation-direction property is not supported by Internet Explorer 9 and earlier versions.
Related pages
CSS3 tutorial: CSS3 animation