Générateur CSS cubic-bezier
Faites glisser les deux poignées pour modeler une courbe d'easing, essayez un preset et appuyez sur Lecture pour ressentir le timing. Copiez la valeur cubic-bezier() prête à l'emploi — tout se met à jour en direct dans votre navigateur.
Tout fonctionne dans votre navigateur. Aucun téléchargement, aucune inscription.
Comment ça fonctionne
Modeler la courbe
Faites glisser les deux poignées colorées sur la courbe. Chacune est un point de contrôle : son X est limité à 0–1, tandis que Y peut dépasser cette plage pour un easing rebondissant.
Prévisualiser le mouvement
Appuyez sur Lecture pour animer un bloc le long de la piste en utilisant votre courbe comme CSS transition-timing-function, afin de ressentir l'easing plutôt que de simplement voir la ligne.
Copier la valeur
Copiez la valeur cubic-bezier(x1, y1, x2, y2) — ou la ligne de transition complète — en un clic et collez-la dans votre feuille de styles. Rien n'est téléchargé.