animation-duration

  • Raccourci de la révision : CSS/animation-duration
  • Titre de la révision : CSS : la propriété animation-duration
  • ID de la révision : 354861
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS animation-duration précise la durée que l'animation doit utiliser pour compléter un cycle.

Une valeur de 0, qui est la valeur par défaut, indique qu'aucune animation ne doit survenir.

Il est souvent utile d'utiliser la propriété raccourcie {{ cssxref("animation") }} afin de définir toutes les propriétés en une seule fois.

  • {{ Xref_cssinitial() }} 0
  • 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
  • {{ Xref_cssanimatable() }} non
  • {{ Xref_csscanonicalorder() }} {{Xref_cssuniqueorder}}

Syntaxe

animation-duration: <time> [, <time>]*

Valeurs

<time>
La durée pour qu'une animation réalise un cycle. Elle peut être définie en seconde (en spécifiant « s » comme unité) ou en millisecondes (en spécifiant « ms » comme unité). Si aucune unité n'est définie, l'utilisation des secondes est supposée.
Note : les valeurs négatives ne sont pas valides, impliquant que la déclaration soit ignorée. À noter que certaines implémentations précoces et préfixées peuvent les considérer comme de la même manière que 0s.

Exemples

Voir Animations CSS pour des exemples.

Spécifications

Spécification État Commentaire
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }} {{ Spec2('CSS3 Animations') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 3.0{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}{{ CompatGeckoDesktop("16.0") }} 10 12{{ property_prefix("-o") }}
12.10 #
4.0{{ property_prefix("-webkit") }}
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base 2.0{{ property_prefix("-webkit") }} {{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}{{ CompatGeckoDesktop("16.0") }} {{ CompatNo() }} {{ CompatNo() }} 4.2{{ property_prefix("-webkit") }}

Voir également

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

Source de la révision

<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-duration</code> précise la durée que l'animation doit utiliser pour compléter un cycle.</p>
<p>Une valeur de <code>0</code>, qui est la valeur par défaut, indique qu'aucune animation ne doit survenir.</p>
<p>Il est souvent utile d'utiliser la propriété raccourcie {{ cssxref("animation") }} afin de définir toutes les propriétés en une seule fois.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn><code>0</code></li>
  <li><dfn>S'applique à </dfn>éléments de niveau bloc et éléments de niveau en ligne</li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn>non</li>
  <li><dfn>Média </dfn>{{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn>comme spécifiée</li>
  <li><dfn>{{ Xref_cssanimatable() }} </dfn> non</li>
  <li><dfn>{{ Xref_csscanonicalorder() }} </dfn> {{Xref_cssuniqueorder}}</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval syntaxbox">
animation-duration: <a href="/en/CSS/time" title="en/CSS/time">&lt;time&gt;</a> [, <a href="/en/CSS/time" title="en/CSS/time">&lt;time&gt;</a>]*
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>&lt;time&gt;</code></dt>
  <dd>
    La durée pour qu'une animation réalise un cycle. Elle peut être définie en seconde (en spécifiant « s » comme unité) ou en millisecondes (en spécifiant « ms » comme unité). Si aucune unité n'est définie, l'utilisation des secondes est supposée.</dd>
</dl>
<div class="note">
  <strong>Note :</strong> les valeurs négatives ne sont pas valides, impliquant que la déclaration soit ignorée. À noter que certaines implémentations précoces et préfixées peuvent les considérer comme de la même manière que <code>0s</code>.</div>
<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écifications</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>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
      <td>{{ Spec2('CSS3 Animations') }}</td>
      <td>&nbsp;</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>3.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}{{ CompatGeckoDesktop("16.0") }}</td>
        <td>10</td>
        <td>12{{ property_prefix("-o") }}<br />
          12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
        <td>4.0{{ 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>2.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}{{ CompatGeckoDesktop("16.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>4.2{{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a href="/fr/CSS/Animations_CSS" title="CSS animations">Animations CSS</a></li>
  <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li>
  <li>{{ CSS_Reference:animation() }}</li>
</ul>
Revenir à cette révision