Créer des courbes d'animation complexes en CSS avec la fonction de lissage de vitesse linear()

Découvrez linear(), une fonction d'adoucissement en CSS qui interpole de manière linéaire entre ses points, ce qui vous permet de recréer des effets de rebond et de ressort.

Bramus

Easings en CSS

Lorsque vous animez ou faites la transition d'éléments en CSS, vous contrôlez la vitesse à laquelle une valeur change avec une fonction d'adoucissement à l'aide des propriétés animation-timing-function et transition-timing-function.

Plusieurs mots clés sont disponibles en tant que préréglages dans CSS, à savoir linear, ease, ease-in, ease-out et ease-in-out. Pour créer vos propres courbes d'accélération, utilisez la fonction cubic-bezier() ou adoptez une approche par étapes à l'aide de la fonction d'accélération steps().

Lorsqu'elles sont utilisées de manière appropriée, les fonctions d'accélération donnent à un élément animé une impression de poids lorsqu'il semble prendre de l'élan.

Il n'est pas possible de créer des courbes complexes telles que des effets de rebond ou de ressort en CSS, mais grâce à linear(), vous pouvez désormais les approximer étonnamment bien.

Présentation de linear()

linear() est une nouvelle façon de définir une courbe d'accélération en CSS. Cette fonction accepte un certain nombre d'arrêts, séparés par des virgules. Chaque arrêt est un nombre compris entre 0 et 1. Entre chaque arrêt, l'interpolation est effectuée de manière linéaire, ce qui explique le nom de la fonction.

animation-timing-function: linear(0, 0.25, 1);

Par défaut, ces arrêts sont répartis de manière équidistante. Dans l'extrait précédent, cela signifie que la valeur de sortie de 0.25 sera utilisée à 50 %.

Le graphique de linear(0, 0.25, 1) se présente comme suit :

Si vous ne souhaitez pas que les arrêts soient répartis de manière équidistante, vous pouvez éventuellement transmettre une durée d'arrêt. Lorsque vous transmettez une valeur comme longueur d'arrêt, vous définissez son point de départ :

animation-timing-function: linear(0, 0.25 75%, 1);

Ici, une valeur de sortie de 0.25 ne sera pas utilisée à la marque 50%, mais le sera à la marque 75%.

Lorsque vous spécifiez deux valeurs pour la durée d'un arrêt, vous définissez à la fois son point de départ et son point d'arrivée :

animation-timing-function: linear(0, 0.25 25% 75%, 1);

Une valeur de sortie de 0,25 sera utilisée de 25 % à 75 % du temps.

Créer des courbes complexes

Bien que les exemples précédents soient des accélérations plus simples, vous pouvez utiliser linear() pour recréer des fonctions d'accélération complexes si vous faites des compromis sur la précision.

Prenons cette courbe d'accélération de rebond, un type d'accélération qui ne peut pas être exprimé directement en CSS, défini à l'aide de JavaScript :

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

Alors que le code ne vous dit peut-être pas grand-chose, une visualisation peut vous en apprendre beaucoup. Voici le résultat, visualisé sous la forme d'une courbe bleue :

La courbe peut être simplifiée en y ajoutant un certain nombre d'arrêts. Ici, chaque point vert indique un arrêt :

Lorsqu'il est transmis à linear(), le résultat est une courbe qui ressemble à celle d'origine, mais qui est un peu plus rugueuse sur les bords.

Comparez la boîte animée verte à la bleue : vous verrez que la verte n'est pas aussi fluide.

Toutefois, si vous ajoutez suffisamment de points d'arrêt, vous pouvez obtenir une approximation assez précise de la courbe d'origine. Voici une version mise à jour :

En doublant simplement le nombre de points d'arrêt, vous obtenez déjà un résultat fluide.

Le code utilisé pour l'animation se présente comme suit :

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

Un outil pour vous aider

Créer manuellement cette liste d'arrêts serait très fastidieux. Heureusement, Jake et Adam ont créé un outil pour vous aider à convertir une courbe d'accélération en son équivalent linear().

L'outil prend en entrée une fonction d'adoucissement JavaScript ou une courbe SVG, et génère la courbe simplifiée à l'aide de linear(). Utilisez les curseurs pour contrôler le nombre d'arrêts souhaités et leur précision.

En haut à droite, vous pouvez également choisir l'un des préréglages : "Spring" (Ressort), "Bounce" (Rebond), "Simple elastic" (Élastique simple) ou "Material Design emphasized easing" (Accélération accentuée Material Design).

Prise en charge des outils de développement

Les outils de développement permettent de visualiser et de modifier le résultat de linear(). Cliquez sur l'icône pour afficher un info-bulle interactif qui vous permet de faire glisser les arrêts.

Cette fonctionnalité des outils pour les développeurs est disponible dans les outils pour les développeurs à partir de Chrome 114.