Générateur Cubic-Bezier CSS

Cet outil permet de façonner une courbe d'accélération CSS cubic-bezier() personnalisée avec quatre curseurs et de la prévisualiser en direct avant de copier le code. Ajustez les valeurs des points de contrôle x1, y1, x2 et y2, observez la courbe et un élément de prévisualisation en mouvement se mettre à jour instantanément, puis copiez transition-timing-function: cubic-bezier(...) directement dans votre feuille de style.

En quoi consiste cet outil ?

cubic-bezier() est une fonction de temporisation CSS qui contrôle l'accélération et la décélération d'une valeur animée ou transitionnée, au lieu d'un mouvement à vitesse constante. Elle est définie par deux points de contrôle — (x1, y1) et (x2, y2) — qui courbent une ligne entre un point de départ fixe (0,0) et un point d'arrivée fixe (1,1). Les valeurs de x doivent rester entre 0 et 1, mais les valeurs de y peuvent sortir de cette plage pour créer des effets de dépassement ou de rebond.

Ajuster à la main quatre nombres décimaux pour obtenir une sensation ni trop brutale ni trop molle demande beaucoup d'essais. Cet outil remplace ce tâtonnement par une manipulation directe : déplacez un curseur, observez la courbe se plier et la balle de prévisualisation bouger en conséquence, et copiez le CSS une fois le mouvement satisfaisant.

Source : CSS Easing Functions Level 1, W3C — la spécification qui définit cubic-bezier() et les cinq mots-clés nommés sur lesquels reposent les préréglages de cet outil.

Pourquoi l'utiliser ?

Un graphique SVG en direct montre exactement comment votre courbe se plie entre les points de départ et d'arrivée fixes, avec les deux points de contrôle et leurs poignées tracés clairement.
Le bouton Lecture anime un élément de prévisualisation sur une piste en utilisant votre courbe exacte, pour ressentir le mouvement plutôt que de simplement voir un graphique statique.
Préréglages en un clic pour les cinq fonctions d'accélération nommées standard — ease, ease-in, ease-out, ease-in-out et linear — telles que documentées dans la spécification CSS Easing Functions.
Les valeurs de y peuvent descendre sous 0 ou dépasser 1, permettant de créer des effets de rebond que les mots-clés nommés ne peuvent pas produire.
Génère un CSS transition-timing-function prêt à coller — la même valeur fonctionne aussi pour animation-timing-function.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit. Gratuit, sans inscription.

Mode d'emploi

Déplacez les curseurs x1/y1 pour définir le premier point de contrôle, qui façonne le début de l'animation.
Déplacez les curseurs x2/y2 pour définir le second point de contrôle, qui façonne la fin de l'animation.
Observez la courbe noire du graphique — si elle bombe au-dessus de la diagonale en début de course, le mouvement démarre vite ; si elle reste en dessous, il démarre lentement.
Cliquez sur Lecture pour voir un élément de prévisualisation se déplacer sur la piste en utilisant votre courbe comme transition-timing-function.
Essayez un préréglage (ease, ease-in, ease-out, ease-in-out, linear) comme point de départ, puis affinez les curseurs à partir de là.
Copiez le CSS généré et collez-le dans une règle de transition ou d'animation.

Exemple

Entrée

x1 : 0.25, y1 : 0.1, x2 : 0.25, y2 : 1

Résultat

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Ce sont les points de contrôle exacts du mot-clé standard ease de CSS — démarrage rapide, puis ralentissement progressif jusqu'à la fin.

Pourquoi les valeurs de y peuvent dépasser 0–1

Contrairement à l'axe des x, qui représente le temps et doit aller de 0 à 1, l'axe des y représente la progression de la valeur animée et n'a pas cette limite. Fixer y1 en dessous de 0 ou y2 au-dessus de 1 fait plonger la courbe avant la valeur de départ, ou la fait dépasser la valeur finale avant de se stabiliser — la base des effets de dépassement et d'anticipation utilisés dans les pressions de boutons, l'apparition de modales et les micro-interactions ludiques. Aucun des cinq mots-clés nommés (ease, ease-in, ease-out, ease-in-out, linear) ne peut produire cela ; il faut un cubic-bezier() personnalisé.

transition-timing-function contre animation-timing-function

La valeur cubic-bezier() générée par cet outil fonctionne à l'identique dans les deux propriétés. Utilisez transition-timing-function quand le mouvement est déclenché par un changement d'état (comme un survol ou un changement de classe), et animation-timing-function dans une règle d'animation pilotée par @keyframes quand vous avez besoin de la même sensation appliquée automatiquement ou en boucle.

Motifs d'accélération courants

Retour d'interface vif (boutons, interrupteurs) : gardez les points de contrôle proches de la diagonale avec un léger biais ease-out, par exemple cubic-bezier(0.4, 0, 0.2, 1).
Courbe standard de Material Design : cubic-bezier(0.4, 0, 0.2, 1) — démarrage rapide, fin douce, très utilisée pour les transitions de panneaux et de cartes.
Rebond/dépassement : poussez y2 au-dessus de 1, par exemple cubic-bezier(0.34, 1.56, 0.64, 1), pour une apparition ludique.
Anticipation avant le mouvement : poussez y1 en dessous de 0 pour que l'élément recule légèrement avant d'avancer.
Ease-in-out fluide pour les animations en boucle : gardez la courbe presque symétrique autour du centre.

Association avec d'autres outils CSS

Une courbe d'accélération est rarement utilisée seule — elle s'applique généralement à un élément qui a aussi besoin d'ombres, de coins arrondis ou de dégradés. Générez le style visuel avec les autres outils CSS ci-dessous, puis ajoutez la fonction de temporisation de cet outil à la même règle ou déclaration de transition/animation.

→ Générateur de Box Shadow · Générateur de Border Radius

Foire aux questions

Que signifient réellement les quatre nombres de cubic-bezier() ?

Ce sont les coordonnées de deux points de contrôle, (x1, y1) et (x2, y2), qui courbent une courbe de Bézier allant d'un point de départ fixe en (0,0) à un point d'arrivée fixe en (1,1). L'axe des x représente le temps écoulé (de 0 à 1) et l'axe des y représente la progression de la propriété animée, c'est pourquoi x1 et x2 doivent rester entre 0 et 1 alors que y1 et y2 peuvent sortir de cette plage.

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

ease (la valeur par défaut de CSS) démarre vite puis ralentit en douceur. ease-in démarre lentement et accélère vers la fin, utile pour les éléments qui quittent l'écran. ease-out démarre vite et décélère, utile pour les éléments qui entrent à l'écran. ease-in-out est lent aux deux extrémités et plus rapide au milieu, donnant une sensation fluide et symétrique.

Puis-je utiliser la même valeur cubic-bezier() pour les transitions et les animations ?

Oui. transition-timing-function et animation-timing-function acceptent exactement la même syntaxe cubic-bezier() et produisent la même courbe d'accélération — la seule différence est la fonctionnalité CSS (une transition ou une animation par keyframes) à laquelle cette fonction de temporisation est rattachée.

Pourquoi ma courbe semble-t-elle cassée quand y1 ou y2 est très grand ou négatif ?

C'est normal — pousser les valeurs de y bien au-delà de 0–1 crée un fort dépassement, où la valeur animée dépasse largement sa cible avant de se stabiliser. C'est un effet valide et souvent voulu, mais si ce n'est pas souhaité, ramenez y1 et y2 plus près de la plage 0–1.

Une courbe personnalisée est-elle meilleure que les mots-clés nommés ?

Pas nécessairement — les cinq mots-clés (ease, ease-in, ease-out, ease-in-out, linear) couvrent la plupart des besoins courants et sont plus faciles à lire dans le code. Passez à un cubic-bezier() personnalisé quand vous avez besoin d'une sensation spécifique que les mots-clés n'offrent pas, comme un rebond, un coup plus net, ou pour correspondre à la charte de mouvement d'un système de design particulier.