Webzstore
The CSS 'animation-direction' property specifies whether an animation should play forwards, backward, or alternate between playing forwards and backward. This property enhances the control over animation sequences, allowing for more complex and dynamic visual effects. It's particularly useful for creating looping animations that need to reverse at certain points or achieve a specific storytelling effect through animation.
Looking for the animation-delay property instead? It has its own guide: CSS 'animation-delay' Property Explained.
CSS 'animation-direction' Property Examples
See the Pen CSS 'animation-direction' Property by Webzstore (@webzstore) on CodePen.
The 'animation-direction' property offers a straightforward way to modify the play direction of CSS animations, making it possible to craft more nuanced and engaging visual experiences on the web.
Browser Support For 'animation-direction' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 43 | May 2015 |
| Edge | 12 | Jul 2015 |
| Firefox | 16 | Oct 2012 |
| Safari | 9 | Sep 2015 |
| Opera | 30 | Jun 2015 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation-direction for the full compatibility details, including mobile browsers.
CSS Syntax of the 'animation-direction' Property
animation-direction: normal|reverse|alternate|alternate-reverse;
Usage of the 'animation-direction' Property
Use 'animation-direction' when you want to control the direction flow of an animation sequence. This could be to create a pendulum-like effect where an animation smoothly transitions back and forth or to reverse the direction of an animation for visual variety or emphasis.
Property Values of the 'animation-direction' Property
- Normal: The animation plays forward each cycle, which is the default behavior. It starts from the beginning of each iteration.
- Reverse: The animation plays backward each cycle. It starts from the end and moves towards the beginning. Easing functions are reversed too, so
ease-inbehaves likeease-out. - Alternate: The animation direction alternates with each iteration. It plays forwards on the first play, reverses on the second, and alternates. Iterations are counted from one, so odd iterations play forwards and even iterations play backwards.
- Alternate-reverse: This is similar to alternate, but it starts by playing in reverse. The first cycle plays from the end to the beginning, alternating direction with each subsequent iteration.
