Webzstore
The CSS 'animation-play-state' property allows you to control the running state of an animation, allowing you to pause and resume it as needed. This property is particularly useful for creating interactive animations that respond to user inputs, such as hover effects or animations that can be paused and resumed with buttons or other controls.
CSS 'animation-play-state' Property Examples
See the Pen CSS 'animation-play-state' Property by Webzstore (@webzstore) on CodePen.
The 'animation-play-state' property adds a layer of interactivity to web pages by allowing animations to be paused and resumed. This enhances the user experience with dynamic and responsive visual feedback.
Browser Support For 'animation-play-state' 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-play-state for the full compatibility details, including mobile browsers.
CSS Syntax of the 'animation-play-state' Property
animation-play-state: running | paused;
Usage of the 'animation-play-state' Property
You'd use 'animation-play-state' when you want to control the playback of CSS animations dynamically. For example, you might pause an animation when the user scrolls away from an element or hovers over a specific area, providing a more engaging and interactive user experience.
Property Values of the 'animation-play-state' Property
- Running: The default value. The animation will play as normal.
- Paused: The animation is paused at its current state. If applied before the animation starts, the animation will be paused at the beginning.
