Éditeur de Courbe Cubic-Bezier — Animations CSS

Éditeur de Courbe Cubic-Bezier — Créez des Courbes d’Animation CSS Fluides

Concevez la courbe d’accélération parfaite pour vos animations et transitions CSS. Déplacez les deux points de contrôle pour façonner la courbe, observez une bille rejouer le mouvement en temps réel, essayez les presets classiques, et copiez la fonction de timing cubic-bezier() directement dans votre feuille de style.

Qu’est-ce qu’une courbe d’accélération ?

L’accélération (easing) contrôle la façon dont une animation accélère et ralentit pendant sa durée. Au lieu de se déplacer à vitesse constante (linéaire), le mouvement du monde réel accélère et décélère. Le CSS l’exprime avec cubic-bezier(x1, y1, x2, y2) — quatre nombres qui définissent une courbe du début (0,0) à la fin (1,1) via deux points de contrôle.

Comment l’utiliser

• Déplacez les poignées roses : chacune courbe le tracé près du début ou de la fin
• Observez la bille : l’aperçu en direct rejoue votre accélération en boucle pour ressentir le mouvement
• Dépassement : déplacez une poignée au-dessus ou en dessous de la boîte pour créer des effets de rebond/anticipation (valeurs hors 0–1)
• Presets : partez de ease, linear, ease-in/out, ou un rebond élastique
• Copiez : récupérez la valeur cubic-bezier() prête

Comprendre les quatre nombres

• x1, y1 : le premier point de contrôle — façonne le début de l’animation
• x2, y2 : le second point de contrôle — façonne la fin
• Les valeurs X sont bloquées entre 0 et 1 (le temps ne recule pas) ; les valeurs Y peuvent dépasser cette plage pour le dépassement

Où utiliser le résultat

Collez la valeur dans n’importe quelle transition ou animation CSS, par exemple : transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);. Cela fonctionne aussi avec animation-timing-function.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Rien n’est envoyé ni stocké.