mozilla

Revision 465215 of animation-timing-function

  • Revision slug: CSS/animation-timing-function
  • Revision title: animation-timing-function
  • Revision id: 465215
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

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

{{cssbox("animation-timing-function")}}

Syntaxe

Syntaxe formelle : {{csssyntax("animation-timing-function")}}
animation-timing-function: ease
animation-timing-function: ease-in
animation-timing-function: ease-out
animation-timing-function: ease-in-out
animation-timing-function: linear
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
animation-timing-function: step-start
animation-timing-function: step-stop
animation-timing-function: steps(4, end)

animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)

Valeurs

<timingfunction>
Chaque {{ xref_csstimingfunction() }} représente une fonction de temporisation à lier à la propriété à animer correspondante, comme défini dans {{ cssxref("animation-property") }}.

Exemples

Voir Animations CSS pour des exemples.

Spécifications

Spécification Statut Commentaire
{{ SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function') }} {{ 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 Mobile 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"} ) }}

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-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>
<p>{{cssbox("animation-timing-function")}}</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-timing-function")}}
</pre>
<pre>
animation-timing-function: ease
animation-timing-function: ease-in
animation-timing-function: ease-out
animation-timing-function: ease-in-out
animation-timing-function: linear
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
animation-timing-function: step-start
animation-timing-function: step-stop
animation-timing-function: steps(4, end)

animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
</pre>
<h3>Valeurs</h3>
<dl>
  <dt>
    <code>&lt;timingfunction&gt;</code></dt>
  <dd>
    Chaque {{ xref_csstimingfunction() }} représente une fonction de temporisation à lier à la propriété à animer correspondante, 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>{{ SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function') }}</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 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>
<p>{{ languages( { "ja": "ja/CSS/animation-timing-function", "en": "en/CSS/animation-timing-function"} ) }}</p>
Revert to this revision