path: root/files/fr/web/css/easing-function/index.html

---
title: <timing-function>
slug: Web/CSS/easing-function
tags:
  - CSS
  - Reference
  - Type
translation_of: Web/CSS/easing-function
translation_of_original: Web/CSS/timing-function
original_slug: Web/CSS/timing-function
---
<div>{{CSSRef}}</div>

<p>Le type de donnée <strong><code>&lt;timing-function&gt;</code></strong> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « <em>easing functions</em> » (en anglais).</p>

<p>Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("&lt;number&gt;")}}) allant également de 0.0 à 1.0.</p>

<p><img src="/files/3434/TF_with_output_gt_than_1.png"><img src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="margin-right: 5px;"></p>

<p>Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de <em>rebondissement</em>.</p>

<p>Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).</p>

<h2 class="cleared" id="Valeurs">Valeurs</h2>

<div style="width: 100%;">
<p>CSS prend en charge deux types de fonctions de temporisation :</p>

<ul>
 <li>un sous-ensemble des courbes de Bézier cubiques</li>
 <li>des fonctions en escalier.</li>
</ul>

<p>Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.</p>

<h3 id="La_classe_de_fonctions_cubic-bezier()">La classe de fonctions <code>cubic-bezier()</code></h3>

<p style="float: left;"><img src="/files/3433/cubic-bezier,%20example.png"></p>

<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_Bézier">une courbe de Bézier cubique</a>. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.</p>

<p>Une courbe de Bézier cubique se définit par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P<sub>0</sub> est donc <code>(0, 0)</code> (instant initial et état initial) et P<sub>3</sub> est <code>(1, 1)</code> (instant final et état final).</p>

<p>Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">fonctions mathématiques</a> (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P<sub>0</sub> et P<sub>3</sub> sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P<sub>1</sub> et P<sub>2</sub> sont toutes les deux comprises dans l'intervalle <code>[0, 1]</code>.</p>

<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées de P<sub>1</sub> et/ou P<sub>2</sub> sont situées en dehors de l'intervalle <code>[0, 1]</code> génèreront un effet de rebondissement.</p>

<p>Lorsqu'on définit une courbe de Bézier invalide en CSS via <code>cubic-bezier</code>, le moteur ignore la déclaration dans son intégralité.</p>
</div>

<h4 id="Syntaxe">Syntaxe</h4>

<pre class="syntaxbox">cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)
</pre>

<p>avec</p>

<dl>
 <dt><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em></strong></dt>
 <dd>qui sont des valeurs de type {{cssxref("&lt;number&gt;")}} représentant les abscisses et les ordonnées des points P<sub>1</sub> et P<sub>2</sub> définissant la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.</dd>
</dl>

<h4 id="Exemples">Exemples</h4>

<p>Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :</p>

<pre class="brush: css">cubic-bezier(0.1, 0.7, 1.0, 0.1)

cubic-bezier(0, 0, 1, 1)

/* Des valeurs négatives pour les ordonnées pour */
/* créer du rebondissement                       */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Idem avec des valeurs &gt; 1                     */
cubic-bezier(0, 1.1, 0.8, 4)       </pre>

<p>En revanche, ces définitions sont invalides :</p>

<pre class="brush: css example-bad">/* Bien que le type de sortie puisse être une couleur */
/* les courbes de Bézier fonctionnent avec des ratios */
/* numériques */
cubic-bezier(0.1, red, 1.0, green)

/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
/* car sinon la courbe n'est pas une fonction temporelle. */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* Il faut définir les deux points, il n'y a pas de valeur */
/* par défaut. */
cubic-bezier(0.3, 2.1)

/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
/* car sinon la courbe n'est pas une fonction temporelle. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)
</pre>

<h3 id="La_classe_de_fonction_steps()">La classe de fonction <code>steps()</code></h3>

<p>La notation fonctionnelle <code>steps()</code> permet de définir <a href="https://en.wikipedia.org/wiki/Step_function">une fonction en escalier</a> qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.</p>

<p style="float: left;"><img src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></p>

<p><code>steps(2, start)</code></p>

<p style="float: left;"><img src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"></p>

<p><code>steps(4, end)</code></p>

<h4 class="cleared" id="Syntaxe_2">Syntaxe</h4>

<pre class="syntaxbox">steps(<em>nombre_de_marche</em>, <em>direction</em>)
</pre>

<p>avec</p>

<dl>
 <dt><code><strong><em>nombre_de_marche</em></strong></code></dt>
 <dd>Un entier (valeur de type {{cssxref("&lt;integer&gt;")}} qui représente le nombre de marches composant la fonction en escalier.</dd>
 <dt><code><strong><em>direction</em></strong></code></dt>
 <dd>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
 <ul>
  <li><code>start</code> indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation</li>
  <li><code>end</code> indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.</li>
 </ul>
 <code>end</code> est la valeur par défaut.</dd>
</dl>

<h4 id="Exemples_2">Exemples</h4>

<p>Voici des exemples de fonction de temporisation en escalier valides :</p>

<pre class="brush: css">/* Il y a cinq marches et la dernière est utilisée */
/* avant la fin de l'animation.                    */
steps(5, end)

/* Une fonction à deux marches dont la première se */
/* déroule au début de l'animation.                */
steps(2, start)

/* Le deuxième paramètre est facultatif. */
steps(2)
</pre>

<p>En revanche, celles-ci sont invalides :</p>

<pre class="brush: css example-bad">/* Le premier paramètre doit être un entier (type */
/* &lt;integer&gt;)                                     */
steps(2.0, end)

/* Le nombre d'étapes ne peut pas être négatif. */
steps(-3, start)

/* Il ne peut pas être nul.*/
steps(0, end)
</pre>

<h3 id="La_classe_de_fonction_frames()">La classe de fonction <code>frames()</code></h3>

<div class="note">
<p><strong>Note :</strong> Le nom "frames" est <a href="https://github.com/w3c/csswg-drafts/issues/1301">actuellement en discussion</a> et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.</p>
</div>

<p>La notation fonctionnelle <code>frames()</code> définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre <code>frames()</code> et <code>steps()</code> est que <code>frames()</code> considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.</p>

<p><img src="https://www.w3.org/TR/css-timing-1/frames-timing-func-examples.svg" style="float: left; height: 200px; width: 244px;"><code>frames(2), frames(4)</code></p>

<p> </p>

<p> </p>

<h4 id="Syntaxe_3">Syntaxe</h4>

<pre class="syntaxbox">steps(<var>nombre_etapes</var>)
</pre>

<p>où :</p>

<dl>
 <dt><var>nombre_etapes</var></dt>
 <dd>Est un entier ({{cssxref("&lt;integer&gt;")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.</dd>
</dl>

<h4 id="Exemples_3">Exemples</h4>

<p>Ces fonctions de temporisation sont valides :</p>

<pre class="brush: css">/* Le paramètre est un entier positif. */
frames(10)
</pre>

<div class="note">
<p><strong>Note :</strong> <a href="https://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html">une démo de la fonction <code>frames()</code> avec un exemple fonctionnel</a> est disponible sur notre dépôt GitHub.</p>
</div>

<p>Ces fonctions de temporisation sont invalides :</p>

<pre class="brush: css example-bad">/* Le paramètre passé à la fonction doit être un entier
   et pas une valeur décimale, même si cette dernière est
   égale à un entier. */
frames(2.0)

/* Le nombre de frames doit être positif. */
frames(-3)

/* Il doit y avoir au moins une frame. */
frames(0)
</pre>

<h3 id="Mots-clés_pour_les_fonctions_de_temporisation_usuelles">Mots-clés pour les fonctions de temporisation usuelles</h3>

<h4 id="linear"><code>linear</code></h4>

<p><img src="/files/3425/cubic-bezier,linear.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>. Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.</p>

<h4 class="cleared" id="ease"><code>ease</code></h4>

<p><img src="/files/3429/cubic-bezier,ease.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette fonction est semblable à <code>ease-in-out</code> sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..</p>

<h4 class="cleared" id="ease-in"><code>ease-in</code></h4>

<p><img src="/files/3426/cubic-bezier,ease-in.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>. L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.</p>

<h4 class="cleared" id="ease-in-out"><code>ease-in-out</code></h4>

<p><img src="/files/3428/cubic-bezier,ease-in-out.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme <code>ease-in</code> et dans la deuxième moitié, elle se comporte comme <code>ease-out</code>.</p>

<h4 class="cleared" id="ease-out"><code>ease-out</code></h4>

<p><img src="/files/3427/cubic-bezer,ease-out.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.</p>

<h4 class="cleared" id="step-start"><code>step-start</code></h4>

<p><img src="/files/3423/steps(1,start).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, start)</code> (ou <code>steps(1, jump-start)</code>). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.</p>

<h4 class="cleared" id="step-end"><code>step-end</code></h4>

<p><img src="/files/3424/steps(1,end).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, end)</code> (ou <code>steps(1, jump-end)</code>). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.</p>

<h2 class="cleared" id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Spécification</th>
   <th>État</th>
   <th>Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function', '&lt;timing-function&gt;')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Définition initiale.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', '&lt;timing-function&gt;')}}</td>
   <td>{{Spec2('CSS3 Animations')}}</td>
   <td>Définition de <code>&lt;single-timing-function&gt;</code> comme synonyme de <code>&lt;single-transition-timing-function&gt;</code> selon le module CSS pour les transitions.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.types.timing-function", 2)}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <code>&lt;timing-function&gt;</code></li>
 <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
 <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a></li>
</ul>