animation-play-state

  • Raccourci de la révision : CSS/animation-play-state
  • Titre de la révision : CSS : la propriété animation-play-state
  • ID de la révision : 50545
  • Créé :
  • Créateur : tregagnon
  • Version actuelle ? Non
  • Commentaire page display name changed to 'CSS : la propriété animation-play-state'

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS animation-play-state détermine si l'animation est en cours de lecture ou en pause. Vous pouvez interroger cette propriété afin de déterminer si l'animation est en cours de lecture ou non. De plus, vous pouvez lui affecter la valeur paused ou reprendre la lecture de l'animation.

Note : à cet instant, des discussions sont en cours afin de retirer cette propriété de la spécification, puisque cette fonctionalité peut être réalisée par d'autres méthodes.

La reprise de la lecture d'une animation se fera là ou elle a été mise en pause plutôt que de recommencer depuis le début de la séquence.

  • {{ xref_cssinitial() }} : running
  • S'applique à : éléments de niveau bloc et éléments de niveau en ligne
  • {{ xref_cssinherited() }} : non
  • Média : {{ xref_cssvisual() }}
  • {{ xref_csscomputed() }} : comme spécifiée

Syntaxe

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

Valeurs

running
L'animation est en cours de lecture.
paused
L'animation est en pause.

Exemples

Voir Animations CSS pour des exemples.

Spécification

Spécification État Commentaire
CSS Animations Level 3 {{ Spec2('CSS3 Animations') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} 10 {{ property_prefix("-ms") }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

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

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

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Résumé">Résumé</h2>
<p>La propriété CSS <code>animation-play-state</code> détermine si l'animation est en cours de lecture ou en pause. Vous pouvez interroger cette propriété afin de déterminer si l'animation est en cours de lecture ou non. De plus, vous pouvez lui affecter la valeur <code>paused</code> ou reprendre la lecture de l'animation.</p>
<div class="note"><strong>Note :</strong> à cet instant, des discussions sont en cours afin de retirer cette propriété de la spécification, puisque cette fonctionalité peut être réalisée par d'autres méthodes.</div>
<p>La reprise de la lecture d'une animation se fera là ou elle a été mise en pause plutôt que de recommencer depuis le début de la séquence.</p>
<ul class="cssprop"> <li>{{ xref_cssinitial() }} : <code>running</code></li> <li>S'applique à : éléments de niveau bloc et éléments de niveau en ligne</li> <li>{{ xref_cssinherited() }} : non</li> <li>Média : {{ xref_cssvisual() }}</li> <li>{{ xref_csscomputed() }} : comme spécifiée</li>
</ul><h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval syntaxbox">animation-play-state: running | paused [, running | paused]*
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl> <dt><code>running</code></dt> <dd>L'animation est en cours de lecture.</dd> <dt><code>paused</code></dt> <dd>L'animation est en pause.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>Voir <a href="/fr/CSS/Animations_CSS" title="fr/CSS/Animations_CSS">Animations CSS</a> pour des exemples.</p>
<h2 id="Specifications" name="Specifications">Spécification</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Spécification</th> <th scope="col">État</th> <th scope="col">Commentaire</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 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Support de base</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>{{ CompatUnknown() }}</td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Support de base</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2 id="Voir_également">Voir également</h2>
<ul> <li><a href="/fr/CSS/Animations_CSS" title="fr/CSS/Animations_CSS">Animations CSS</a></li> <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li> <li>{{ CSS_Reference:animation() }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/animation-play-state", "en": "en/CSS/animation-play-state"} ) }}</p>
Revenir à cette révision