L’essentiel en bref
- L’easing décrit comment la vitesse d’un mouvement change pendant sa durée, au lieu de rester constante du début à la fin.
- L’ease-out démarre vite puis ralentit, ce qui convient à ce qui entre ; l’ease-in démarre lentement puis accélère, ce qui convient à ce qui sort.
- Un mouvement linéaire, à vitesse constante, paraît mécanique pour un déplacement isolé mais convient aux boucles continues et aux rotations.
- Une courbe cubic-bezier définit n’importe quel easing avec deux points de contrôle, et des valeurs hors de 0 à 1 créent un dépassement.
- Les ressorts décrivent le mouvement par des réglages physiques comme la raideur et l’amortissement, et le CSS peut les approcher avec la fonction linear().
Sur cette page
L’easing est la façon dont la vitesse d’un mouvement change pendant qu’il se joue. Sans easing, un objet se déplace à une vitesse constante et s’arrête net, ce qui paraît mécanique. Avec easing, il accélère et ralentit comme le font les choses réelles : un tiroir sort vite et se pose, une balle prend de la vitesse en tombant. Choisir le bon easing est le moyen le plus rapide de rendre n’importe quelle animation naturelle.
À quoi ressemble l’easing
Les animateurs dessinent l’easing sous forme de diagramme d’espacement : où se trouve un objet à intervalles de temps égaux. Quand les repères sont espacés régulièrement, la vitesse est constante. Quand ils se resserrent, l’objet va lentement ; quand ils s’écartent, il va vite. Voici les quatre easings de base, chacun montrant onze instants égaux du même mouvement, de gauche à droite.
Les quatre easings dont vous avez vraiment besoin
Le CSS nomme cinq courbes de base, et les outils de design reprennent les mêmes idées sous des noms voisins. Quatre d’entre elles couvrent presque tous les travaux. La cinquième, ease, est la valeur par défaut du navigateur : une courbe qui démarre assez vite et se pose doucement, un peu comme un ease-out plus tendre.
| Easing | Courbe CSS | À utiliser pour |
|---|---|---|
| Ease-out | cubic-bezier(0, 0, 0.58, 1) | Ce qui entre ou apparaît : menus, cartes, titres |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) | Ce qui sort ou disparaît |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Ce qui passe d’un endroit à un autre de l’écran |
| Linear | cubic-bezier(0, 0, 1, 1) | Boucles continues, rotations, barres de progression, dérive de fond |
La logique est physique. Ce qui arrive doit déjà être en mouvement quand il apparaît, puis se poser : il fait donc un ease-out. Ce qui part doit prendre de la vitesse en s’en allant : il fait un ease-in. Le linéaire est faux pour un déplacement isolé, mais juste pour tout ce qui est continu : une boucle qui ralentit à ses extrémités semble hésiter à chaque répétition, comme l’expliquent les boucles parfaites.
Comment fonctionnent les courbes cubic-bezier
Chaque courbe d’easing CSS est tracée entre deux points fixes, le début (0, 0) et la fin (1, 1). Une fonction cubic-bezier() ajoute deux points de contrôle qui courbent la trajectoire. L’axe horizontal est le temps et l’axe vertical la progression. Les valeurs de temps doivent rester entre 0 et 1, mais les valeurs de progression peuvent aller au-delà, ce qui fait dépasser sa cible au mouvement avant qu’il revienne.
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Exits: shorter and easing in */
.card-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}La référence de MDN sur les fonctions d’easing liste toutes les formes acceptées par le CSS, dont steps() pour un mouvement image par image.
Les ressorts : l’easing issu de la physique
Un ressort n’utilise pas de courbe ni de durée fixes. Vous décrivez plutôt la physique, en général la raideur (la force avec laquelle il tire vers la cible), l’amortissement (la vitesse à laquelle il se calme) et la masse, et le mouvement en découle. Les ressorts raides et bien amortis paraissent vifs et précis ; les ressorts lâches et peu amortis rebondissent. Les ressorts sont populaires dans les interfaces d’applis parce qu’ils réagissent naturellement quand un mouvement est interrompu à mi-chemin.
De nombreuses bibliothèques d’animation offrent directement des ressorts. En CSS pur, la fonction linear() peut en approcher un en listant des points le long de sa trajectoire, ce que les navigateurs modernes prennent en charge.
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
transition: transform 500ms
linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}linear() relie les points par des segments droits. Plus de points donnent une courbe plus lisse ; des générateurs peuvent les calculer à partir des réglages d’un ressort.L’easing et la durée travaillent ensemble
La même courbe ne se ressent pas pareil selon la durée. Un ease-out sur 150 millisecondes paraît un claquement net ; sur 800, une lente glissade. Accordez les deux à la distance et au rôle. Les principes du motion design donnent des durées typiques.
Erreurs courantes
- Un mouvement linéaire pour un menu ou une carte qui entre
- Un ease-in sur ce qui apparaît, qui démarre alors mollement
- La même longue durée pour les petits et les grands mouvements
- Un dépassement rebondissant sur tout
- Un easing aux extrémités d’une boucle continue
Mieux
- Un ease-out pour tout ce qui arrive
- Un ease-in, un peu plus court, pour tout ce qui part
- Court pour les petits déplacements, plus long pour les grands
- Le dépassement réservé aux petits moments ludiques
- Du linéaire pour les boucles, pour qu’elles n’hésitent jamais
L’easing en JavaScript, dans les outils de design et en vidéo
Les mêmes courbes fonctionnent hors du CSS. En JavaScript, l’API Web Animations prend une chaîne d’easing CSS. Les outils de design et de vidéo reprennent les mêmes idées sous des noms comme ease in, ease out et ease in and out, en général avec un éditeur de graphique pour les courbes personnalisées et, dans beaucoup d’outils de prototypage, des préréglages de ressort.
const card = document.querySelector('.card')
card.animate(
[
{ transform: 'translateY(24px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 },
],
{ duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)Quelle que soit la courbe, certaines personnes préfèrent moins de mouvement. Respectez leur réglage en raccourcissant ou en supprimant le mouvement ; la réduction des animations montre comment. Et pour les fonds en boucle, où le linéaire est en général juste, voyez les fonds en dégradé animés.
Les questions qu’on nous pose
Qu’est-ce que l’easing en animation ?
L’easing est la façon dont la vitesse d’un mouvement change pendant sa durée. Au lieu de se déplacer à vitesse constante, un mouvement avec easing accélère, ralentit ou les deux, ce qui paraît plus naturel.
Quelle différence entre ease-in et ease-out ?
L’ease-in démarre lentement puis accélère, ce qui convient à ce qui sort. L’ease-out démarre vite puis ralentit, ce qui convient à ce qui entre.
Quand utiliser un easing linéaire ?
Pour les mouvements continus comme les boucles, les rotations, les barres de progression et la lente dérive d’un fond. Pour un déplacement isolé, il paraît mécanique.
Que signifie cubic-bezier en CSS ?
Cela définit une courbe d’easing avec deux points de contrôle entre le début et la fin fixes. Les valeurs de temps restent entre 0 et 1, tandis que des valeurs de progression au-delà créent un dépassement.
Qu’est-ce qu’une animation à ressort ?
Un mouvement décrit par des réglages physiques comme la raideur, l’amortissement et la masse au lieu d’une courbe fixe. Le CSS peut approcher les ressorts avec la fonction d’easing linear().
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
