Introduction de linear(), une fonction de lissage de vitesse en CSS qui effectue une interpolation linéaire entre ses points, ce qui vous permet de recréer les effets de rebond et de rebond.
Lissages de vitesse dans CSS
Lors de l'animation ou de la transition d'éléments en CSS, vous pouvez contrôler la fréquence à laquelle une valeur change à l'aide d'une fonction de lissage de vitesse, à l'aide des propriétés animation-timing-function et transition-timing-function.
Plusieurs mots clés prédéfinis sont disponibles en CSS, à savoir linear, ease, ease-in, ease-out et ease-in-out. Pour créer vos propres courbes de lissage de vitesse, utilisez la fonction cubic-bezier() ou optez pour une approche basée sur des étapes à l'aide de la fonction de lissage de vitesse steps().
Lorsqu'ils sont utilisés correctement, les lissages de vitesse donnent une impression de poids à un élément animé, car il semble prendre de l'ampleur.
Il n'est pas possible de créer des courbes complexes telles que des effets de rebond ou de rebond en CSS, mais grâce à linear(), vous pouvez désormais les approximations étonnamment bien.
Présentation de linear()
Navigateurs pris en charge
- 113
- 113
- 112
- x
linear() est une nouvelle façon de définir un lissage de vitesse en CSS. Cette fonction accepte un certain nombre d'arrêts, séparés par une virgule. Chaque arrêt correspond à un numéro unique compris entre 0 et 1. L'interpolation entre chaque arrêt est effectuée de manière linéaire et explique le nom de la fonction.
animation-timing-function: linear(0, 0.25, 1);
Par défaut, ces arrêts sont répartis à égale distance. Dans l'extrait précédent, cela signifie que la valeur de sortie de 0.25 sera utilisée lorsque la marque aura atteint 50 %.
Ici, le graphique pour linear(0, 0.25, 1) ressemble à ceci:
Si vous ne souhaitez pas que les arrêts soient répartis à égale distance, vous pouvez éventuellement indiquer une longueur d'arrêt. Lorsque vous transmettez une valeur en tant que longueur d'arrêt, vous définissez son point de départ:
animation-timing-function: linear(0, 0.25 75%, 1);
Ici, la valeur de sortie 0.25 ne sera pas utilisée au niveau de la marque 50%, mais sous 75%.
Lorsque vous spécifiez deux valeurs comme longueur d'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 entre 25% et 75% dans le temps.
Créer des courbes complexes avec linear()
Bien que les exemples ci-dessus soient des lissages de vitesse très simples, vous pouvez utiliser linear() pour recréer très simplement des fonctions de lissage de vitesse complexes, au risque de perdre une certaine précision.
Prenons cette courbe du lissage de vitesse, un type d'accélération qui ne peut pas être exprimé directement en CSS et qui est 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;
}
Si le code ne vous apprendra peut-être pas grand-chose, une visualisation le pourrait. Voici la sortie, représentée sous forme de courbe bleue:
Vous pouvez simplifier la courbe en y ajoutant un certain nombre d'arrêts. Ici, chaque point vert indique un arrêt:
Lorsqu'elle est transmise à linear(), le résultat est une courbe qui ressemble un peu à la courbe d'origine, mais est un peu plus rugueuse sur les bords.
Comparez la boîte animée verte à la boîte bleue. Vous constatez qu'elle n'est pas aussi fluide.
Toutefois, si vous ajoutez suffisamment d'arrêts, vous pourrez très bien vous rapprocher de la courbe d'origine. Voici la version mise à jour:
En doublant simplement le nombre d'arrêts, vous obtenez déjà des résultats fluides.
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
La création manuelle de cette liste d'arrêts serait très fastidieuse. Heureusement, Jake et Adam ont créé un outil pour vous aider à convertir une courbe de lissage de vitesse en son équivalent linear().
L'outil utilise une fonction de lissage de vitesse JavaScript ou une courbe SVG en entrée et génère la courbe simplifiée à l'aide de linear(). À l'aide des curseurs, contrôlez le nombre d'étapes souhaitées et leur précision.
Vous pouvez également sélectionner l'un des préréglages proposés dans l'angle supérieur droit : "Ressort", "Rebond", "Élastique simple" ou "Lissage de vitesse accentué par Material Design".
Assistance pour les 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 une info-bulle interactive qui vous permet de faire glisser le curseur autour des arrêts.
Cette fonctionnalité est disponible dans les outils de développement disponibles dans Chrome 114.
Photo par Howie Mapson, publiée sur Unsplash