Propriété CSS transition-timing-function

La propriété CSS transition-timing-function spécifie la courbe de vitesse d'une transition — c'est-à-dire la façon dont les valeurs intermédiaires sont calculées tout au long de la durée de la transition. Elle ne modifie pas la durée d'une transition (c'est le rôle de transition-duration) ; elle contrôle plutôt le rythme entre le début et la fin.

Pourquoi est-ce important ? Une transition qui s'exécute à vitesse parfaitement constante (linear) paraît souvent mécanique. Le mouvement réel accélère et décélère, c'est pourquoi la courbe par défaut ease — démarrage lent, milieu rapide, fin lente — semble beaucoup plus naturelle à l'œil. Choisir la bonne fonction de temporisation est ce qui distingue une animation d'interface soignée d'une animation rigide.

La propriété transition-timing-function fait partie des propriétés CSS3.

Cette page couvre les valeurs par mot-clé, les puissantes fonctions cubic-bezier() et steps(), comment définir une courbe différente par propriété, ainsi que les pièges les plus courants.

Valeurs par mot-clé

La propriété accepte ces courbes nommées :

ease — démarrage lent, accélération, fin lente (valeur par défaut)
linear — vitesse constante du début à la fin
ease-in — démarrage lent, accélération vers la fin
ease-out — démarrage rapide, ralentissement vers la fin
ease-in-out — démarrage et fin lents, plus rapide au milieu
step-start — saut immédiat vers la valeur finale (aucune valeur intermédiaire)
step-end — maintien de la valeur initiale, puis saut à la fin

Chaque mot-clé est simplement un raccourci vers une définition cubic-bezier() ou steps() sous-jacente — par exemple, linear équivaut à cubic-bezier(0, 0, 1, 1) et ease équivaut à cubic-bezier(0.25, 0.1, 0.25, 1).

Valeur initiale	ease
S'applique à	Tous les éléments, pseudo-éléments ::before et ::after.
Héritage	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.transitionTimingFunction = "ease";

Syntaxe

Valeurs CSS transition-timing-function

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Lorsqu'une valeur est omise, le navigateur utilise la valeur initiale ease.

Exemple de transition-timing-function

Dans l'exemple ci-dessous, deux propriétés s'animent ensemble. La première fonction de temporisation s'applique à la première transition-property (background-color), et la seconde s'applique à left. La courbe cubic-bezier() utilisée ici dépasse intentionnellement 1, ce qui fait légèrement rebondir la boîte au-delà de sa cible — un effet qu'aucune des valeurs par mot-clé ne peut reproduire.

Exemple de code CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        padding: 2em;
        width: 40px;
        height: 40px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.75, .3, .14, 1.12);
        /* first value corresponds to the first transition-property value, and the second value corresponds to the second */
      }
      .example:hover .box {
        left: 450px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <p>Hover over the element to see the effect</p>
    <div class="example">
      <div class="box"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de transition-timing-function avec les valeurs "ease", "linear", "ease-in" et "ease-out"

Exemple de code CSS avec les valeurs transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: ease;
      }
      .el2 {
        transition-timing-function: linear;
      }
      .el3 {
        transition-timing-function: ease-in;
      }
      .el4 {
        transition-timing-function: ease-out;
      }
    </style>
  </head>
  <body>
    <h2>Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: ease;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: linear;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-timing-function: ease-in;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-timing-function: ease-out;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Essayez vous-même »

Survolez le conteneur et observez les quatre cercles en mouvement : linear maintient un rythme régulier, ease-in démarre lentement puis rattrape les autres, et ease-out part en trombe avant de ralentir.

Exemple de transition-timing-function avec les valeurs "step-start" et "step-end"

Autre exemple CSS transition-timing-function

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        padding: 2em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        border-radius: 50%;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-timing-function: step-start;
      }
      .el2 {
        transition-timing-function: step-end;
      }
    </style>
  </head>
  <body>
    <h2> Transition-timing-function property example</h2>
    <div class="container">
      <p>
        <code>transition-timing-function: step-start;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-timing-function: step-end;</code>
      </p>
      <div class="example el2"></div>
    </div>
  </body>
</html>

Essayez vous-même »

La fonction cubic-bezier()

Chaque courbe par mot-clé repose sur une courbe de Bézier cubique, et cubic-bezier(x1, y1, x2, y2) vous permet de définir la vôtre. Les quatre nombres sont les coordonnées de deux points de contrôle ; le point de départ (0, 0) et le point d'arrivée (1, 1) sont fixes.

/* a gentle ease-out */
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

/* an overshoot/"bounce" — the y values can go below 0 or above 1 */
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);

Les valeurs x (x1, x2) doivent rester dans la plage 0–1, mais les valeurs y peuvent la dépasser — c'est précisément ainsi que l'on crée un effet de dépassement ou d'anticipation. Il s'agit de la valeur la plus flexible, et elle vaut la peine d'être utilisée lorsque les mots-clés semblent trop génériques.

La fonction steps()

steps(n, position) fait progresser la transition en n étapes discrètes au lieu de se déplacer en douceur — utile pour les animations de feuilles de sprites, les effets de machine à écrire, ou tout ce qui doit « sauter » plutôt que glisser.

/* 4 equal jumps */
transition-timing-function: steps(4, end);

Le deuxième argument optionnel détermine si le saut se produit au début ou à la fin de chaque intervalle (par défaut end). Les mots-clés step-start et step-end correspondent simplement à steps(1, start) et steps(1, end).

Définir une courbe par propriété

Lorsque vous animez plusieurs propriétés simultanément, vous pouvez fournir une liste de fonctions de temporisation séparées par des virgules. Chacune s'aligne sur l'entrée correspondante dans transition-property :

transition-property: background-color, transform;
transition-duration: 0.3s, 0.6s;
transition-timing-function: ease-out, cubic-bezier(0.68, -0.55, 0.27, 1.55);

Si vous fournissez moins de fonctions de temporisation que de propriétés, la liste est répétée ; si vous en fournissez davantage, les valeurs excédentaires sont ignorées.

Pièges courants

Elle rythme seulement, elle ne chronomètre pas. Une courbe à l'apparence plus vive ne se termine pas plus tôt — modifiez transition-duration pour cela.
x doit rester dans [0, 1]. Dans cubic-bezier(), une valeur x hors plage rend toute la déclaration invalide et le navigateur revient à ease.
L'ordre compte dans les listes. La N-ième fonction de temporisation correspond à la N-ième transition-property, et non à un nom — gardez les listes alignées.
Préférez le raccourci transition pour le code en production ; les formes longues présentées ici servent principalement à la clarté.

Valeurs

Valeur	Description
ease	L'effet de transition démarre lentement, accélère puis se termine lentement. Il s'agit de la valeur par défaut.
linear	L'effet de transition progresse à vitesse constante du début à la fin.
ease-in	L'effet de transition démarre lentement et accélère vers la fin.
ease-out	L'effet de transition démarre rapidement, mais ralentit vers la fin.
ease-in-out	L'effet de transition démarre et se termine lentement.
step-start	Équivalent à `steps(1, start)`.
step-end	Équivalent à `steps(1, end)`.
steps(int,start\|end)	Définit une fonction en escalier avec deux paramètres. Le premier paramètre spécifie le nombre d'intervalles de la fonction. Il doit être supérieur à 0. Le second paramètre est soit "start" soit "end", et indique le point auquel le changement de valeurs se produit dans l'intervalle. Si le second paramètre n'est pas fourni, la valeur "end" est utilisée.
cubic-bezier (n,n,n,n)	Définit une courbe de Bézier cubique pour contrôler l'accélération et la décélération de la transition.
initial	Applique la valeur par défaut de la propriété.
inherit	Hérite de la valeur de la propriété depuis l'élément parent.

Pratique

La propriété CSS transition-timing-function accepte toutes les valeurs suivantes, sauf

ease-in-outstep-endpausedlinear