Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 22117 of animation-play-state

  • Revision slug: CSS/animation-play-state
  • Revision title: animation-play-state
  • Revision id: 22117
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 5 words added, 2 words removed

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.

Note: At this time, this property is being considered for removal from the specification, since its functionality can be simulated by other means.

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.

  • {{ xref_cssinitial() }}: running
  • Applies to: block-level and inline-level elements
  • {{ xref_cssinherited() }}: no
  • Media: {{ xref_cssvisual() }}
  • {{ xref_csscomputed() }}: as specified

Syntax

animation-play-state: running | paused [, running | paused]*

Values

running
The animation is currently playing.
paused
The animation is currently paused.

Examples

See CSS animations for examples.

Specification

Specification Status Comment
CSS Animations Level 3 {{ Spec2('CSS3 Animations') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} 10 {{ property_prefix("-ms") }} 12 {{ property_prefix("-o") }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • CSS animations
  • {{ domxref("Event/AnimationEvent", "AnimationEvent") }}
  • {{ CSS_Reference:animation() }}

{{ languages( { "ja": "ja/CSS/animation-play-state", "fr": "fr/CSS/animation-play-state"} ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2>Summary</h2>
<p>The <code>animation-play-state</code> <a href="/en/CSS" title="CSS">CSS</a> property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.</p>
<div class="note"><strong>Note:</strong> At this time, this property is being considered for removal from the specification, since its functionality can be simulated by other means.</div>
<p>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.</p>
<ul class="cssprop"> <li>{{ xref_cssinitial() }}: <code>running</code></li> <li>Applies to: block-level and inline-level elements</li> <li>{{ xref_cssinherited() }}: no</li> <li>Media: {{ xref_cssvisual() }}</li> <li>{{ xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre class="eval syntaxbox">animation-play-state: running | paused [, running | paused]*
</pre>
<h3>Values</h3>
<dl> <dt><code>running</code></dt> <dd>The animation is currently playing.</dd> <dt><code>paused</code></dt> <dd>The animation is currently paused.</dd>
</dl>
<h2>Examples</h2>
<p>See <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> for examples.</p>
<h2 name="Specifications">Specification</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-" title="http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-">CSS Animations Level 3</a></td> <td>{{ Spec2('CSS3 Animations') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}</td> <td>10 {{ property_prefix("-ms") }} <a class="external" href="http://msdn.microsoft.com/library/windows/apps/hh466320.aspx" title="http://msdn.microsoft.com/library/windows/apps/hh466320.aspx"></a></td> <td>12 {{ property_prefix("-o") }}</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2>See also</h2>
<ul> <li><a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a></li> <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li> <li>{{ CSS_Reference:animation() }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/animation-play-state", "fr": "fr/CSS/animation-play-state"} ) }}</p>
Revert to this revision