mozilla

Revision 465213 of animation-play-state

  • Revision slug: CSS/animation-play-state
  • Revision title: animation-play-state
  • Revision id: 465213
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

{{ 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.

{{cssbox("animation-play-state")}}

Syntaxe

Syntaxe formelle : {{csssyntax("animation-play-state")}}
animation-play-state: running
animation-play-state: paused

animation-play-state: paused, running, running

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 Statut Commentaire
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}} {{ 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 Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

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

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <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>
<p>{{cssbox("animation-play-state")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
<a href="/fr/docs/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs" title="Syntaxe de définition des valeurs">Syntaxe formelle</a> : <code>{{csssyntax("animation-play-state")}}</code>
</pre>
<pre>
animation-play-state: running
animation-play-state: paused

animation-play-state: paused, running, running
</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="Sp.C3.A9cification">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">Statut</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
      <td>{{ Spec2('CSS3 Animations') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">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") }}</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 Mobile</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_.C3.A9galement">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>
Revert to this revision