Type CSS <easing-function> - CSS | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Type CSS <easing-function>

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Le type de donnée CSS <easing-function> représente une fonction mathématique décrivant la vitesse à laquelle la valeur change.

Cette transition entre deux valeurs peut être appliquée dans différentes situations. Elle peut être utilisée pour décrire la rapidité selon laquelle les valeurs évoluent durant les animations. Elle permet ainsi de faire varier la vitesse de l'animation au fur et à mesure de sa progression. On peut utiliser une fonction d'évolution pour les transitions et animations CSS.

Dans cet article

Syntaxe

css
/* Fonction d'évolution linéaire par mot-clé */
linear                /* linear(0, 1) */

/* Fonctions d'évolution linéaire personnalisées */
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)

/* Fonctions d'évolution cubique de Bézier par mot-clé */
ease                  /* cubic-bezier(0.25, 0.1, 0.25, 1) */
ease-in               /* cubic-bezier(0.42, 0, 1, 1) */
ease-out              /* cubic-bezier(0, 0, 0.58, 1) */
ease-in-out           /* cubic-bezier(0.42, 0, 0.58, 1) */

/* Fonction d'évolution cubique de Bézier personnalisée */
cubic-bezier(0.25, 0.1, 0.25, 1)

/* Fonctions d'évolution en escalier par mot-clé */
step-start            /* steps(1, jump-start) */
step-end              /* steps(1, jump-end) */

/* Fonctions d'évolution en escalier personnalisées */
steps(4, end)
steps(10, jump-both)

Valeurs

Une <easing-function> peut être l'un des types suivants :

<linear-easing-function>

Crée des transitions qui progressent à un rythme constant. Cette fonction peut être définie de l'une des façons suivantes :

linear

Indique une interpolation à vitesse constante, sans accélération ni décélération pendant toute la durée. Ce mot-clé est équivalent à linear(0, 1). Il peut aussi être représenté par cubic-bezier(0, 0, 1, 1).

Note : Le mot-clé linear est toujours interprété comme linear(0, 1), tandis que la fonction linear(0, 1) est interprétée comme linear(0 0%, 1 100%).

linear()

Définit plusieurs points de progression à l'aide de valeurs <number>, avec des valeurs <percentage> optionnelles pour contrôler leur position dans le temps.

<cubic-bezier-easing-function>

Crée des transitions progressives avec des vitesses variables. Cette fonction peut être spécifiée de l'une des façons suivantes :

ease

Représente la fonction d'évolution cubic-bezier(0.25, 0.1, 0.25, 1). L'interpolation commence lentement, accélère fortement, puis ralentit progressivement vers la fin. Elle est similaire au mot-clé ease-in-out, mais accélère plus fortement au début.

ease-in

Représente la fonction d'évolution cubic-bezier(0.42, 0, 1, 1). L'interpolation commence lentement, puis accélère progressivement jusqu'à la fin, où elle s'arrête brutalement.

ease-out

Représente la fonction d'évolution cubic-bezier(0, 0, 0.58, 1). L'interpolation commence brutalement, puis ralentit progressivement jusqu'à la fin.

ease-in-out

Représente la fonction d'évolution cubic-bezier(0.42, 0, 0.58, 1). L'interpolation commence lentement, accélère, puis ralentit à nouveau vers la fin. Au début, le comportement est similaire à ease-in et à la fin, à ease-out.

cubic-bezier()

Définit une courbe personnalisée à l'aide de quatre valeurs <number> qui spécifient les coordonnées de deux points de contrôle. Les abscisses doivent être comprises dans l'intervalle [0, 1].

<step-easing-function>

Crée des transitions en escalier qui divisent l'animation en un nombre d'intervalles de même longueur, provoquant un saut d'un palier à l'autre au lieu d'une transition progressive. Cette fonction peut être spécifiée de l'une des façons suivantes :

step-start

Représente la fonction d'évolution steps(1, jump-start) ou steps(1, start). L'interpolation saute immédiatement à l'état final et y reste jusqu'à la fin.

step-end

Représente la fonction d'évolution steps(1, jump-end) ou steps(1, end). L'interpolation reste dans l'état initial jusqu'à la fin, où elle passe directement à l'état final.

steps()

Crée une courbe en escalier à l'aide d'un <integer> pour spécifier le nombre d'intervalles et d'un mot-clé optionnel pour contrôler le moment des sauts.

Syntaxe formelle

<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

<linear-easing-function> =
linear |
<linear()>

<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>

<step-easing-function> =
step-start |
step-end |
<steps()>

<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )

<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )

<steps()> =
steps( <integer> , <step-position>? )

<integer> =
<number-token>

<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Cette syntaxe reflète le dernier standard selon CSS Easing Functions Level 2, CSS Values and Units Module Level 4. Tous les navigateurs n'ont peut-être pas implémenté toutes les parties. Voir la Compatibilité des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Comparer les fonctions d'évolution

Cet exemple fournit un outil de comparaison entre les différentes fonctions d'évolution avec une animation. Vous pouvez sélectionner une des fonctions d'évolution depuis le menu déroulant parmi quelques mots-clés, certains exemples cubic-bezier() ou steps(). Après avoir sélectionné une option, vous pouvez lancer ou interrompre l'animation grâce au bouton correspondant.

HTML

html
<div>
  <div></div>
</div>
<ul>
  <li>
    <button class="animation-button">Démarrer l'animation</button>
  </li>
  <li>
    <label for="easing-select">Choisir une fonction d'évolution&nbsp;:</label>
    <select id="easing-select">
      <option selected>linear</option>
      <option>linear(0, 0.5 50%, 1)</option>
      <option>ease</option>
      <option>ease-in</option>
      <option>ease-in-out</option>
      <option>ease-out</option>
      <option>cubic-bezier(0.1, -0.6, 0.2, 0)</option>
      <option>cubic-bezier(0, 1.1, 0.8, 4)</option>
      <option>steps(5, end)</option>
      <option>steps(3, start)</option>
      <option>steps(4)</option>
    </select>
  </li>
</ul>

CSS

css
body > div {
  position: relative;
  height: 100px;
}

div > div {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
  background-image: radial-gradient(
    circle at 10px 10px,
    rgb(25 255 255 / 80%),
    rgb(25 255 255 / 40%)
  );
  border-radius: 50%;
  top: 25px;
  animation: 1.5s infinite alternate;
}

@keyframes move-right {
  from {
    left: 10%;
  }

  to {
    left: 90%;
  }
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

JavaScript

js
const selectElem = document.querySelector("select");
const startBtn = document.querySelector("button");
const divElem = document.querySelector("div > div");

startBtn.addEventListener("click", () => {
  if (startBtn.textContent === "Démarrer l'animation") {
    divElem.style.animationName = "move-right";
    startBtn.textContent = "Arrêter l'animation";
    divElem.style.animationTimingFunction = selectElem.value;
  } else {
    divElem.style.animationName = "unset";
    startBtn.textContent = "Démarrer l'animation";
  }
});

selectElem.addEventListener("change", () => {
  divElem.style.animationTimingFunction = selectElem.value;
});

Le module des fonctions d'évolution CSS
Le module des animations CSS
Le module des transitions CSS
Un site pour générer des fonctions d'évolution linear() (angl.)
Un site pour construire des courbes de Bézier cubiques (angl.)

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 23 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu