Outils · CSS · Générateur de courbe cubic-bezier
Générateur de courbe cubic-bezier
Faites glisser une courbe pour créer une valeur d'accélération cubic-bezier(), regardez-la jouer avec une transition CSS en direct, et copiez le code.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
Comment ça marche
Faites glisser la courbe, ou saisissez directement les quatre nombres X/Y.
Regardez la démo de mouvement en direct - elle exécute une vraie transition CSS avec votre courbe.
Copiez la valeur cubic-bezier() générée.
Questions fréquentes
C'est une exigence du CSS - x représente le temps, qui ne peut ni reculer ni dépasser la fin de la transition. y est la valeur interpolée, qui peut légitimement dépasser 1 ou descendre sous 0, ce qui donne leur effet aux courbes à rebond (« back »).
Non. La courbe, le graphique et la démo de mouvement sont générés et affichés entièrement dans votre navigateur.
Oui. La même valeur cubic-bezier() fonctionne dans les deux propriétés.
La vraie chose. Le point de la démo se déplace sous une véritable transition CSS réglée exactement sur votre valeur cubic-bezier(), pas une approximation codée à la main.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
Lire le guideHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
Lire le guideAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
Lire le guide
Commentaires