The animation-play-state property specifies whether a CSS animation is running or paused.
When an animation is paused, the animation continues to apply to the element with the progress it had made before being paused. This means that whatever values the animation has reached will still be applied to the element while the animation is paused. When unpaused (set back to running), it restarts from where it left off, as if the “clock” that controls the animation had stopped and started again.
CSS animation-play-state property specifies if the animation is running or it is paused. If you resume a paused animation it will start from where it was left off at the time it was paused, rather than starting from the beginning of the animation sequence. Also, you can run the animation from paused state.
Syntax:
animation-play-state: paused|running|initial|inherit;
Property Value: The animation-play-state property are listed below: