animation-timing-function

  • Raccourci de la révision : CSS/animation-timing-function
  • Titre de la révision : animation-timing-function
  • ID de la révision : 462431
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La propriété CSS animation-timing-function spécifie la manière dont l'animation CSS progresse au cours de chaque cycle. Les différentes valeurs possibles sont une ou plusieurs {{ xref_csstimingfunction() }}.

Pour les animations utilisant les keyframes, la fonction de temporisation s'applique entre les keyframes plutôt que sur toute l'animation. En d'autres termes, la fonction de temporisation s'applique depuis le début de la keyframe jusqu'à la fin de la même keyframe.

Une fonction de temporisation d'animation définie dans un bloc keyframe s'applique à cette même keyframe. Si aucune fonction de temporisation n'est définie pour une keyframe, la fonction spécifiée pour l'animation en général est utilisée.

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

  • {{ xref_cssinitial() }} ease
  • 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-timing-function: <timing-function> [, <timing-function>]*

où :

Chacune des {{ xref_csstimingfunction() }} représente la fonction de temporisation qui lie chacune des propriétés à animer, comme défini dans {{ cssxref("animation-property") }}.

Exemples

Voir Animations CSS pour des exemples.

Spécifications

Spécification Statut 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() }} 4.0{{ 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-timing-function", "en": "en/CSS/animation-timing-function"} ) }}

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-timing-function</code> spécifie la manière dont l'animation CSS progresse au cours de chaque cycle. Les différentes valeurs possibles sont une ou plusieurs {{ xref_csstimingfunction() }}.</p>
<p>Pour les animations utilisant les keyframes, la fonction de temporisation s'applique entre les keyframes plutôt que sur toute l'animation. En d'autres termes, la fonction de temporisation s'applique depuis le début de la keyframe jusqu'à la fin de la même keyframe.</p>
<p>Une fonction de temporisation d'animation définie dans un bloc keyframe s'applique à cette même keyframe. Si aucune fonction de temporisation n'est définie pour une keyframe, la fonction spécifiée pour l'animation en général est utilisée.</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 fois.</p>
<ul class="cssprop">
  <li><dfn>{{ xref_cssinitial() }} </dfn><code>ease</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>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
animation-timing-function: &lt;timing-function&gt; [, &lt;timing-function&gt;]*
</pre>
<p>où :</p>
<dl>
  <dd>
    Chacune des {{ xref_csstimingfunction() }} représente la fonction de temporisation qui lie chacune des propriétés à animer, comme défini dans {{ cssxref("animation-property") }}.</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é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><a class="external" href="http://dev.w3.org/csswg/css3-animations/#animation-timing-function_tag" title="http://dev.w3.org/csswg/css3-animations/#animation-timing-function_tag">CSS Animations Level 3</a></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>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}</td>
        <td>10 {{ property_prefix("-ms") }}</td>
        <td>{{ CompatUnknown() }}</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>{{ 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>
<p>{{ languages( { "ja": "ja/CSS/animation-timing-function", "en": "en/CSS/animation-timing-function"} ) }}</p>
Revenir à cette révision