Revision 465191 of animation-duration

  • Revision slug: CSS/animation-duration
  • Revision title: animation-duration
  • Revision id: 465191
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

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

{{cssbox("animation-duration")}}

Syntaxe

Syntaxe formelle : {{csssyntax("animation-duration")}}
animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms

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 Statut 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() }}

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-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>
<p>{{cssbox("animation-duration")}}</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> : {{csssyntax("animation-duration")}}
</pre>
<pre>
animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms
</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">Statut</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>
Revert to this revision