# L’easing expliqué : pourquoi un bon mouvement paraît naturel

[Canonical HTML page](https://gradiently.design/fr/guide/easing)

Le même mouvement peut paraître maladroit ou fluide selon un seul réglage. Ce réglage, c’est l’easing, et quelques règles simples couvrent presque tous les cas.

## The short version

- 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().

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.

- Linear : espacement régulier: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 9.4%, #f9a8d4 9.4% 10.6%, #1e1b4b 10.6% 19.4%, #f9a8d4 19.4% 20.6%, #1e1b4b 20.6% 29.4%, #f9a8d4 29.4% 30.6%, #1e1b4b 30.6% 39.4%, #f9a8d4 39.4% 40.6%, #1e1b4b 40.6% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 59.4%, #f9a8d4 59.4% 60.6%, #1e1b4b 60.6% 69.4%, #f9a8d4 69.4% 70.6%, #1e1b4b 70.6% 79.4%, #f9a8d4 79.4% 80.6%, #1e1b4b 80.6% 89.4%, #f9a8d4 89.4% 90.6%, #1e1b4b 90.6% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-in : départ lent, fin rapide: `linear-gradient(90deg, #f9a8d4 0% 2.3%, #1e1b4b 2.3% 5.6%, #f9a8d4 5.6% 6.8%, #1e1b4b 6.8% 12.4%, #f9a8d4 12.4% 13.6%, #1e1b4b 13.6% 20.9%, #f9a8d4 20.9% 22.1%, #1e1b4b 22.1% 30.9%, #f9a8d4 30.9% 32.1%, #1e1b4b 32.1% 42.3%, #f9a8d4 42.3% 43.5%, #1e1b4b 43.5% 54.9%, #f9a8d4 54.9% 56.1%, #1e1b4b 56.1% 68.6%, #f9a8d4 68.6% 69.8%, #1e1b4b 69.8% 83.3%, #f9a8d4 83.3% 84.5%, #1e1b4b 84.5% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-out : départ rapide, arrêt doux: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 15.5%, #f9a8d4 15.5% 16.7%, #1e1b4b 16.7% 30.2%, #f9a8d4 30.2% 31.4%, #1e1b4b 31.4% 43.9%, #f9a8d4 43.9% 45.1%, #1e1b4b 45.1% 56.5%, #f9a8d4 56.5% 57.7%, #1e1b4b 57.7% 67.9%, #f9a8d4 67.9% 69.1%, #1e1b4b 69.1% 77.9%, #f9a8d4 77.9% 79.1%, #1e1b4b 79.1% 86.4%, #f9a8d4 86.4% 87.6%, #1e1b4b 87.6% 93.2%, #f9a8d4 93.2% 94.4%, #1e1b4b 94.4% 97.7%, #f9a8d4 97.7% 100%)`
- Ease-in-out : doux aux deux bouts: `linear-gradient(90deg, #f9a8d4 0% 2.6%, #1e1b4b 2.6% 7.6%, #f9a8d4 7.6% 8.8%, #1e1b4b 8.8% 18.1%, #f9a8d4 18.1% 19.3%, #1e1b4b 19.3% 32.6%, #f9a8d4 32.6% 33.8%, #1e1b4b 33.8% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 66.2%, #f9a8d4 66.2% 67.4%, #1e1b4b 67.4% 80.7%, #f9a8d4 80.7% 81.9%, #1e1b4b 81.9% 91.2%, #f9a8d4 91.2% 92.4%, #1e1b4b 92.4% 97.4%, #f9a8d4 97.4% 100%)`

Diagrammes d’espacement calculés à partir des courbes CSS. Chaque ligne rose est la position de l’objet à l’un des onze instants égaux. Des lignes serrées signifient lent, des lignes écartées signifient rapide.

## 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 |

Les valeurs par mot-clé du CSS. Beaucoup d’équipes utilisent des courbes personnalisées un peu plus marquées, mais les rôles restent les mêmes.

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](https://gradiently.design/fr/guide/seamless-loop-video).

## 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.

```css
/* 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);
}
```

Des courbes personnalisées en CSS. Gardez le dépassement pour de petits moments ludiques ; sur de grands panneaux, il paraît flottant.

La référence de MDN sur [les fonctions d’easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) 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.

```css
/* 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](https://gradiently.design/fr/guide/motion-design-principles) 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.

```js
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' },
)
```

Une entrée avec easing via l’API Web Animations, avec la même courbe que le CSS ci-dessus.

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](https://gradiently.design/fr/guide/reduced-motion) 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](https://gradiently.design/fr/guide/animated-gradient-background).

## FAQ

### 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().