Générateur cubic-bezier : courbes d'accélération

Mode d'emploi

Faites glisser un Point de contrôle 1 ou un Point de contrôle 2 sur le graphique. Cliquez sur un point et utilisez les flèches pour de petits pas ; maintenez Maj pour des pas plus grands.
Saisissez des valeurs exactes dans x1 (0 à 1), y1, x2 (0 à 1) et y2 lorsque vous avez besoin d'une courbe précise. Les valeurs x doivent rester entre 0 et 1.
Cliquez sur un préréglage comme ease-in-out, ou sur Lecture sous Aperçu de l'animation pour voir la balle suivre la courbe.
Copiez la déclaration CSS et utilisez-la dans une transition ou une animation.

Ce que représentent les quatre nombres

Une courbe d'accélération de Bézier cubique part de (0, 0) et arrive à (1, 1). Ses deux points de contrôle, (x1, y1) et (x2, y2), en fixent la forme. Sur l'axe horizontal figure la part du temps écoulé, et sur l'axe vertical la part du changement effectué. La spécification CSS Easing Functions limite les valeurs x des points de contrôle à l'intervalle de 0 à 1, car le temps ne peut ni revenir en arrière ni dépasser la fin.

Les valeurs y n'ont pas de telle limite. Une valeur y supérieure à 1 ou inférieure à 0 fait dépasser la courbe : le changement dépasse alors sa fin puis revient, ou commence par aller dans l'autre sens.

cubic-bezier(x1, y1, x2, y2), où x1 et x2 sont compris entre 0 et 1

Les préréglages et l'animation

Le mot-clé ease vaut cubic-bezier(0.25, 0.1, 0.25, 1), ease-in vaut cubic-bezier(0.42, 0, 1, 1), ease-out vaut cubic-bezier(0, 0, 0.58, 1) et ease-in-out vaut cubic-bezier(0.42, 0, 0.58, 1), comme les donne la spécification. La temporisation linear est une droite, que trace aussi la courbe cubic-bezier(0, 0, 1, 1).

La balle parcourt la courbe comme le rythme d'une animation : vous voyez donc l'accélération comme un mouvement. Si votre appareil demande une animation réduite, l'animation démarre en pause, et Lecture la lance.

Utilisez une courbe douce comme ease-out pour un élément qui arrive sur la page, et ease-in pour un élément qui la quitte.
Gardez une transition courte, pour que l'accélération se sente sans qu'on ait à l'attendre.

Exemple détaillé : l'avancement à mi-durée

La courbe ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), est symétrique par rapport à son centre : à mi-durée, elle a effectué exactement la moitié du changement, et l'affichage indique 0,5000.

La courbe ease, cubic-bezier(0.25, 0.1, 0.25, 1), est plus avancée au même point. À mi-durée, elle a effectué 0,8024 du changement : elle va donc vite au début et ralentit à la fin.

Questions fréquentes

Que montre la balle ?

La balle va de l'extrémité gauche de la piste à la droite, et sa position suit la courbe : la position horizontale est la part du changement effectuée jusqu'ici. Quand la courbe dépasse 1, la balle passe le bout de la piste et y est coupée.

Pourquoi les valeurs x ne peuvent-elles pas dépasser 0 et 1 ?

L'axe horizontal est le temps, et la courbe couvre le temps du début à la fin. Un instant avant le début ou après la fin n'a pas de place sur la courbe : la spécification garde donc les valeurs x des points de contrôle entre 0 et 1. Les valeurs y n'ont pas de limite.

Quelle est la différence entre ease-in et ease-out ?

ease-in démarre lentement et accélère vers la fin, tandis que ease-out démarre vite et ralentit à la fin. Les deux courbes sont symétriques l'une de l'autre : le même changement se lit donc à l'envers.

Puis-je utiliser la valeur dans une animation comme dans une transition ?

Oui. La même valeur cubic-bezier() fonctionne pour animation-timing-function comme pour transition-timing-function : la déclaration peut donc servir aux deux.

Ce que je fais glisser ou saisis est-il enregistré ou envoyé à un serveur ?

Non. La courbe et l'animation sont produites dans votre navigateur. Rien n'est enregistré ni envoyé à notre serveur : copiez donc la déclaration avant de quitter la page.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.