 |
VOOZH | about |
|
VOOZH | about |
The animation-play-state property in CSS controls animation playback: paused stops, running starts, initial resets to default, and inherit inherits from its parent element.
animation-play-state: paused|running|initial|inherit;
The animation-play-state property is listed below:
| Value | Description |
|---|---|
| paused | Specifies that the animation is paused. |
| running | The default value specifies that the animation is running. |
| initial | Sets the animation property to its default value. |
| inherit | Inherits the animation property from its parent element. |
In this example we demonstrate a running animation using the animation-play-state property, causing a green square to move across the screen continuously from left to right.
Output:
In this example, we demonstrates a paused animation using the animation-play-state property, halting the green square's movement across the screen.
Output:
The browser supported by animation-play-state property are listed below:
