#animation-play-state

#Introduction

animation-play-state property specifies whether an animation is running or paused. When resuming a paused animation, it will continue from where it was paused rather than starting from the beginning of the animation sequence.

#Examples

<Go/>

css-apisrc/animation-play-state/App.tsx

Code

Preview

#Syntax

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

#Formal definition

#Formal syntax

/*default value:running*/
animation-play-state: running | paused;

#See also

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state
• CSS animation event
• Animated API

#Compatibility