Que représente vraiment une courbe cubic-bezier ?

L'axe X est le temps, l'axe Y la progression. Une diagonale droite (`cubic-bezier(0, 0, 1, 1)` = `linear`) signifie que la progression est proportionnelle au temps - mouvement ennuyeux. Une courbe en S (le `ease` par défaut) veut dire progression lente au début, rapide au milieu, lente à la fin - ce que l'œil attend d'un objet physique qui accélère puis décélère. Les deux poignées contrôlent l'intensité de cette courbe en S.

Y peut-il dépasser 1 ou descendre sous 0 ?

Y oui - et c'est ainsi qu'on obtient rebond, dépassement et anticipation. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` dépasse au début et à la fin, produisant un effet « élastique ». X non - la spec exige que l'axe temps reste dans 0-1, sinon l'easing ne serait pas une fonction et le navigateur ne pourrait pas l'échantillonner. Glissez la poignée sous 0 ou au-dessus de 1 en Y pour jouer avec le dépassement.

Quel préréglage pour quel type d'animation ?

Utilisez `ease-out` (ou « decelerate » de Material) pour les éléments qui entrent à l'écran - ils semblent atterrir en douceur. Utilisez `ease-in` (« accelerate ») pour ceux qui sortent - ils paraissent emportés. Utilisez `ease-in-out` (« standard ») pour les éléments qui se déplacent dans l'écran (glissements de panneaux, retournements de cartes). N'utilisez `linear` que pour des animations répétitives (un spinner) - c'est le seul easing qui boucle sans à-coup visible.

Pourquoi la courbe « standard » de Material diffère de `ease` CSS ?

CSS `ease` vaut `cubic-bezier(0.25, 0.1, 0.25, 1)` - une courbe en S douce. Material standard, c'est `cubic-bezier(0.4, 0, 0.2, 1)` - décélération plus marquée. La courbe Material paraît plus « designée » : les éléments arrivent vite et s'arrêtent doucement. CSS `ease` a été choisi à la fin des années 90 et précède les conventions modernes de motion ; la plupart des design systems le remplacent.

Peut-on utiliser cubic-bezier en JS ?

Oui. GSAP, Framer Motion, Anime.js et la Web Animations API acceptent tous des valeurs cubic-bezier. Le nom du prop varie (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), mais les quatre nombres sont universels - copiez-les depuis ce générateur, ils fonctionnent partout.

Générateur cubic-bezier

Éditeur cubic-bezier visuel avec aperçu animé et 12 préréglages d'easing standard.

Préréglages

Glissez les points orange pour modeler la courbe.

CSS

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

Aperçu

Glissez les deux poignées pour modeler la courbe. La balle d'aperçu joue l'easing en boucle - vous ressentez le timing, pas seulement les maths. Les préréglages couvrent les quatre mots-clés CSS (ease, ease-in, ease-out, ease-in-out) et les courbes canoniques Material Design (standard, decelerate, accelerate, sharp). Les valeurs sont contraintes où les navigateurs l'exigent - X reste dans 0-1, Y peut dépasser (négatif ou >1) pour rebond et anticipation.

Comment l'utiliser

Choisissez un préréglage
Mots-clés CSS (ease, ease-in, ease-out, ease-in-out) ou courbes Material (standard, decelerate, accelerate, sharp) - un clic charge les valeurs.
Glissez les poignées
P1 et P2 modèlent la courbe. La balle d'aperçu animée se met à jour en direct, vous sentez le nouveau timing avant de valider.
Regardez l'aperçu
La balle joue l'easing en boucle. Basculez entre déplacement, échelle et opacité pour voir comment la même courbe se ressent sur différentes propriétés.
Copiez la valeur
La chaîne `cubic-bezier(x1, y1, x2, y2)` est prête à coller dans votre transition CSS, animation ou prop d'easing JS.

Qu'est-ce que c'est ?

Cubic-bezier est le format de fonction d'easing utilisé par les transitions CSS, les animations CSS, la Web Animations API et la plupart des bibliothèques d'animation JS. Il prend deux points de contrôle (P1 et P2) dans le carré unité ; combinés avec le point de départ implicite (0,0) et d'arrivée (1,1), ils définissent une courbe qui mappe le temps écoulé sur la progression. La forme de la courbe est ce qui rend l'animation vive, douce, élastique ou robotique.

Quand l'utiliser

Concevoir le motion d'un design system (quelle courbe pour l'entrée, la sortie, le déplacement), s'aligner sur un langage de motion donné (Material, iOS, custom), créer un retour de clic élastique avec une courbe à dépassement, lisser des transitions CSS au hover/focus, choisir le bon easing pour des animations de graphiques (linéaire pour les axes, ease-out pour les barres), et expliquer l'easing à ses coéquipiers sans entrer dans la formule.

Erreurs courantes

Utiliser `linear` pour un mouvement ponctuel - rendu mécanique car aucun objet réel ne bouge à vitesse constante. Choisir un easing différent pour chaque transition de l'UI - le motion inconsistant paraît brouillon ; les design systems fixent 3-5 courbes et les réutilisent partout. Oublier qu'une courbe à dépassement peut se faire clipper si la propriété animée a des bornes (une rotation peut dépasser ; un glissement qui sortirait de l'écran paraît cassé). Animer des propriétés lentes avec des courbes agressives - un glissement de 2 secondes avec un ease-out sec ressemble à un bug.

FAQ

Que représente vraiment une courbe cubic-bezier ?: L'axe X est le temps, l'axe Y la progression. Une diagonale droite (`cubic-bezier(0, 0, 1, 1)` = `linear`) signifie que la progression est proportionnelle au temps - mouvement ennuyeux. Une courbe en S (le `ease` par défaut) veut dire progression lente au début, rapide au milieu, lente à la fin - ce que l'œil attend d'un objet physique qui accélère puis décélère. Les deux poignées contrôlent l'intensité de cette courbe en S.
Y peut-il dépasser 1 ou descendre sous 0 ?: Y oui - et c'est ainsi qu'on obtient rebond, dépassement et anticipation. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` dépasse au début et à la fin, produisant un effet « élastique ». X non - la spec exige que l'axe temps reste dans 0-1, sinon l'easing ne serait pas une fonction et le navigateur ne pourrait pas l'échantillonner. Glissez la poignée sous 0 ou au-dessus de 1 en Y pour jouer avec le dépassement.
Quel préréglage pour quel type d'animation ?: Utilisez `ease-out` (ou « decelerate » de Material) pour les éléments qui entrent à l'écran - ils semblent atterrir en douceur. Utilisez `ease-in` (« accelerate ») pour ceux qui sortent - ils paraissent emportés. Utilisez `ease-in-out` (« standard ») pour les éléments qui se déplacent dans l'écran (glissements de panneaux, retournements de cartes). N'utilisez `linear` que pour des animations répétitives (un spinner) - c'est le seul easing qui boucle sans à-coup visible.
Pourquoi la courbe « standard » de Material diffère de `ease` CSS ?: CSS `ease` vaut `cubic-bezier(0.25, 0.1, 0.25, 1)` - une courbe en S douce. Material standard, c'est `cubic-bezier(0.4, 0, 0.2, 1)` - décélération plus marquée. La courbe Material paraît plus « designée » : les éléments arrivent vite et s'arrêtent doucement. CSS `ease` a été choisi à la fin des années 90 et précède les conventions modernes de motion ; la plupart des design systems le remplacent.
Peut-on utiliser cubic-bezier en JS ?: Oui. GSAP, Framer Motion, Anime.js et la Web Animations API acceptent tous des valeurs cubic-bezier. Le nom du prop varie (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), mais les quatre nombres sont universels - copiez-les depuis ce générateur, ils fonctionnent partout.