animation-play-state
Quick Summary for animation-play-state
animation-play-state CSS property sets whether an animation is running or paused.
Code Usage for animation-play-state
<pre class="brush: css notranslate"><code><span class="token comment">/ Single animation /</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> running<span class="token punctuation">;</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">;</span> <span class="token comment">/ Multiple animations /</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">,</span> running<span class="token punctuation">,</span> running<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">animation-play-state</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for animation-play-state
animation-play-state
The animation-play-state CSS property sets whether an animation is running or paused.
Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.
Syntax
/* Single animation */ animation-play-state: running; animation-play-state: paused; /* Multiple animations */ animation-play-state: paused, running, running; /* Global values */ animation-play-state: inherit; animation-play-state: initial; animation-play-state: revert; animation-play-state: unset; Values
running The animation is currently playing.
paused The animation is currently paused.
Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the animation-name property in different ways depending on how many there are. For more information, see Setting multiple animation property values.
Formal definition
| Initial value | running |
|---|---|
| Applies to | all elements, ::before and ::after pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
<single-animation-play-state>#where
<single-animation-play-state> = running | paused
Examples
The animation is paused
HTML<div class="box"></div> .box { background-color: rebeccapurple; border-radius: 10px; width: 100px; height: 100px; animation-name: rotate; animation-duration: 0.7s; animation-play-state: paused; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } See CSS animations for examples.
Specifications
| Specification |
|---|
| CSS Animations Level 2 # animation-play-state |
See also
Using CSS animations JavaScriptAnimationEvent API Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language
Add Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
