<easing-function>

Le type de données CSS <easing-function> indique une fonction mathématique qui décrit la façon dont une valeur numérique évolue.

Cette transition entre deux valeurs peut être appliquées 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. Elle peut aussi être utilisée pour interpoler deux couleurs au sein d'un dégradé.

Les fonctions d'évolution qui appartiennent au sous ensemble des courbes de Bézier cubiques sont souvent appelées des fonctions « douces » car elles permettent d'avoir des évolutions légères en début et en fin d'interpolation. Les fonctions d'évolution relient un ratio d'entrée à un ratio de sortie, tous les deux exprimés comme des nombres (<number>). Pour ces valeurs, 0.0 représente l'état initial et 1.0 représente l'état final.

Selon la fonction utilisée, la sortie calculée peut parfois être supérieure à 1.0 ou être inférieure à 0.0 pendant le cours de l'animation. Cela placera la valeur plus loin que son état final puis la fera revenir. Pour les animations de certaines propriétés (comme left ou right), cela crée un effet de rebond.

Toutefois, certaines propriétés restreindront la valeur de sortie au sein d'un intervalle acceptable. Ainsi, pour une valeur représentant la composante d'une couleur, celle-ci sera écrétée pour rester dans l'intervalle autorisé 0-255. Certaines courbes cubic-bezier() illustrent cette propriété.

Syntaxe

Il existe trois types de fonctions de transition : linéaires, courbes de Bézier cubiques et les fonctions en escalier. Une valeur du type <easing-function> décrit la fonction de transition en utilisant l'un de ces trois types.

Fonctions de transition

CSS prend en charge trois sortes de fonction de transition : les fonctions linéaires, le sous ensemble des courbes cubiques de Bézier qui sont des fonctions et les fonctions en escalier. Les fonctions les plus utiles peuvent être facilement utilisées grâce à des mots-clés.

Les fonctions de transition linéaires

linear

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne diagonale droite par de l'origine 0 0 jusqu'à arriver à la position 1 1.

L'interpolation se fait à évolution constante, du début jusqu'à la fin. Ce mot-clé représente la fonction de transition décrite par cubic-bezier(0.0, 0.0, 1.0, 1.0).

La classe des fonctions de transition cubic-bezier()

La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes étant continues, elles sont souvent utilisées afin de démarrer et de finir progressivement une interpolation. Elles sont parfois appelées fonctions de transition.

Une courbe de Bézier cubique est définie par quatre points P₀, P₁, P₂ et P₃. P₀ et P₃ représentent les points de début et de fin de la courbe. Pour les fonctions de transition CSS, ces points sont fixes, car les coordonnées représentent des ratios (sur les abscisses, le ratio en temps et sur les ordonnées, le ratio en sortie). P₀ est donc situé en (0, 0) et représente l'état initial. P₃ est en (1, 1) et réprésente l'état final.

Toutes les courbes de Bézier cubiques ne sont pas des fonctions de transition, car toutes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui, pour une abscisse donnée, ont une seule ou zéro valeur). Avec les contraintes imposées sur P₀ et P₃ en CSS, une courbe de Bézier cubique sera une fonction mathématique et pourra être utilisée comme fonction de transition, si et seulement si les abscisses de P₁ et P₂ appartiennent, tous les deux, à l'intervalle [0, 1].

Les courbes de Bézier cubiques pour lesquelles les ordonnées des points P₁ ou P₂ sont en dehors de l'intervalle [0, 1] pourront générer un effet de rebond.

Si on utilise une déclaration cubic-bezier avec une fonction invalide, CSS ignorera l'ensemble de la propriété.

Syntaxe

css

cubic-bezier(x1, y1, x2, y2)

avec :

x₁, y₁, x₂, y₂

Des valeurs numériques (<number>) qui représentent les abscisses et ordonnées des points P

₁

et P

₂

qui définissent la courbe de Bézier cubique. x

₁

et x

₂

doivent appartenir à l'intervalle [0, 1] afin que la valeur soit valide.

Mots-clés pour les fonctions de transition communes

ease

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'au point 1 1 en démarrant rapidement et finissant par un arc plat.

L'interpolation démarre doucement puis accélère vivement avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette valeur est semblable à ease-in-out, bien qu'elle accélère plus rapidement au début.

ease-in

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une courbe part l'origine jusqu'au point 1 1 avec une bonne partie de la courbe proche de l'origine et qui s'élève en quasi-ligne droite afin d'atteindre le point d'arrivée 1 1.

L'interpolation démarre lentement puis s'accélère progressivement jusqu'à la fin où elle s'arrête de façon abrutpe. Ce mot-clé représente la fonction de transition cubic-bezier(0.42, 0.0, 1.0, 1.0).

`ease-in-out`

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe qui part de l'origine jusqu'à atteindre le point 1 1. La courbe est symétrique et ressemble à un S étiré

L'interpolation démarre lentement puis accélère avant de ralentir vers la fin. Ce mot-clé représente la fonction de transition cubic-bezier(0.42, 0.0, 0.58, 1.0). Au début, elle se comporte comme ease-in et à la fin, elle se comporte comme ease-out.

ease-out

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Une ligne courbe part de l'origine jusqu'à atteindre le point 1 1. Cette courbe démarre comme une ligne droite en diagonale puis se courbe progressivement à l'approche de 1 1.

L'interpolation démarre abruptement puis ralentit progressivement vers la fin. Ce mot-clé correspond à la fonction de transition cubic-bezier(0.0, 0.0, 0.58, 1.0).

Les fonctions de transition en escalier

La notation fonctionnelle steps() définit une fonction en escalier qui divise le domaine des valeurs de sorties en marches équidistantes.

Syntaxe

css

steps(nombre_de_marches, direction)

avec :

nombre_de_marches

Un entier (<integer>) strictement positif qui représente le nombre de segments équidistants qui composent la fonction en escalier.

direction

Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :

jump-start indique une fonction continue à gauche : le premier saut a lieu au début de l'interpolation ;
jump-end indique une fonction continue à droite : le dernier saut a lieu à la fin de l'interpolation ;
jump-both indique une fonction continue à droite et à gauche avec des pauses au début et à la fin, ce qui se traduit par l'ajout d'une étape lors de l'itération de l'interpolation ;
jump-none indique qu'il n'y a pas de saut au début ou à la fin mais une temporisation de 1/n de la durée totale à chaque extrêmité.
start est équivalent à jump-start
end est équivalent à jump-end

end est la valeur par défaut.

steps( n, <direction> )

steps(2, jump-start) steps(2, start)
steps(4, jump-end) steps(4, end)
steps(5, jump-none)
steps(3, jump-both)

step-start

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du deuxième point vers l'axe Y. L'interpolation saute directement à l'état final et reste ainsi jusqu'à la fin. Ce mot-clé correspond à la fonction de transition steps(1, jump-start) ou steps(1, start).

step-end

Un graphe où les axes X et Y vont de 0 à 1 et où l'axe X est intitulé « Time ratio » et où l'axe Y est intitulé « Output ratio ». Deux points sont présents, le premier situé aux coordonnées 0 0 et le second aux coordonnées 1 1. Une ligne horizontale part du premier point et reste sur l'axe des abscisses. L'interpolation reste dans son état initial jusqu'à la fin où elle saute directement à l'état final. Ce mot-clé représente la fonction de transition steps(1, jump-end) ou steps(1, end).

Exemples

Comparaison des fonctions de transition

Dans cet exemple, on crée une animation qui peut être démarrée ou stoppée à l'aide du bouton fourni et un menu est affiché pour choisir la fonction de transition à utiliser : différents mots-clés sont disponibles ainsi que des exemples utilisant cubic-bezier() et steps(). L'idée est de fournir un outil de comparaison simple entre ces fonctions.

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 de transition :</label>
    <select id="easing-select">
      <option selected>linear</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,
    rgba(25, 255, 255, 0.8),
    rgba(25, 255, 255, 0.4)
  );
  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

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;
});

Résultat

Exemples avec cubic-bezier()

Ces courbes de Bézier cubiques sont valides pour être utilisées en CSS :

css

/* La courbe de Bézier canonique avec quatre nombres dans l'intervalle [0,1]. */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* On peut aussi utiliser des valeurs entières (<integer>) car ce sont des nombres. */
cubic-bezier(0, 0, 1, 1)

/* Les valeurs négatives pour les ordonnées sont valides et créent un effet de rebond.*/
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Les valeurs supérieures à 1.0 pour les ordonnées sont aussi valides. */
cubic-bezier(0, 1.1, 0.8, 4)

Ces courbes de Bézier cubiques sont invalides en CSS :

css

/* Bien que les valeurs animées puissent être des couleurs,
   les courbes de Bézier ne fonctionnent qu'avec des ratios numériques.*/
cubic-bezier(0.1, red, 1.0, green)

/* Les abscisses doivent être dans l'intervalle [0, 1] car sinon l'intervalle
   couvert par la courbe n'est pas valide. */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* Les deux points doivent être explicitement définis, il n'y a pas de valeur
   par défaut. */
cubic-bezier(0.3, 2.1)

/* Les abscisses doivent être dans l'intervalle [0, 1], sinon la courbe
   ne représente pas une fonction du temps. */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

Exemples avec steps()

Ces fonctions de transition sont valides :

css

/* Il y a 5 étapes, la dernière se produit juste avant
   la fin de l'animation. */
steps(5, end)

/* Un escalier à deux marches, la première se produisant
   au début de l'animation. */
steps(2, start)

/* Le deuxième paramètre est optionnel. */
steps(2)

Note : Si l'animation contient plusieurs arrêts, les marches décrites dans la fonction steps() s'appliqueront à chaque section. Ainsi, pour une animation avec trois segments et steps(2), on aura au total 6 étapes, 2 pour chaque segment.

Les fonctions de transitions qui suivent sont invalides :

css

/* Le premier paramètre doit être un entier et ne peut pas être
   une valeur décimale (même si celle-ci est égale à une valeur entière). */
steps(2.0, jump-end)

/* La quantité de marches ne doit pas être négative. */
steps(-3, start)

/* Il doit y avoir au moins une marche.*/
steps(0, jump-none)

Spécifications

Specification
CSS Easing Functions Level 1 # easing-functions

Compatibilité des navigateurs

BCD tables only load in the browser