animation-direction
Single values
normal | alternate [,...].
Applicable to...
Block and Inline Elements
Inherited
No
Description
Defines whether a CSS-animation that has multiple iterations (animation-iteration-count)
will always follow the same direction or change it every second cycle. For example if you use normal
then an animation that moves an element 20px to the right would do the same move in every cycle.
If you use alternate then the animation would move the element to the right, and then to the left and so on.
Prefixes
We need -o- for Opera, -moz- for Firefox and -webkit- for Webkit browsers like Safari and Chrome.
Examples
Compatibility
| Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|
| 4.0+ | 5.0+ | 10.0+ | 12.0+ | 4.0+ |
More about CSS animations
