〰️ CSS Cubic-Bezier Visualizer
Create CSS cubic-bezier easing curves with a visual editor. Drag control points and preview animation in real time. Copy the CSS transition value. Free cubic-bezier generator.
How to Use
1
Drag the control points
Click and drag the two colored handles on the SVG canvas to define your easing curve shape.
2
Preview the animation
Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.
3
Copy the function
Click Copy to copy the cubic-bezier() value. Use it in your CSS transition or animation.
Frequently Asked Questions
What is cubic-bezier in CSS?
cubic-bezier() is a CSS timing function that controls the speed curve of transitions and animations. It takes four values (P1x, P1y, P2x, P2y) that define two control points of a Bézier curve between (0,0) and (1,1).
What do the four values in cubic-bezier mean?
The four values are x1, y1, x2, y2 — the coordinates of two control points. x values must be between 0 and 1 (they represent time). y values can be outside 0–1, which creates bounce or overshoot effects.
What are the built-in CSS easing functions?
ease is cubic-bezier(0.25,0.1,0.25,1). ease-in is cubic-bezier(0.42,0,1,1). ease-out is cubic-bezier(0,0,0.58,1). ease-in-out is cubic-bezier(0.42,0,0.58,1). linear is cubic-bezier(0,0,1,1).
How do I create a bounce animation with cubic-bezier?
Set y values outside the 0–1 range to create overshoot. For example, cubic-bezier(0.34,1.56,0.64,1) creates a spring-like bounce where the element overshoots and settles back.
Where can I use cubic-bezier in CSS?
Use it in the transition-timing-function or animation-timing-function properties. Example: transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94).
Guide : Éditeur de Courbe Cubic Bezier CSS
Qu'est-ce que c'est ?
L'Éditeur Cubic Bezier permet de créer visuellement des courbes d'accélération CSS personnalisées pour les transitions et animations, au-delà des fonctions prédéfinies ease/linear.
La vitesse d'une animation est souvent aussi importante que le mouvement lui-même pour une sensation naturelle.
Comment utiliser
- Faites glisser les points de contrôle sur l'éditeur de courbe.
- Prévisualisez l'animation en temps réel.
- Comparez avec les courbes CSS prédéfinies (ease, ease-in-out…).
- Copiez la fonction
cubic-bezier(x1, y1, x2, y2).
Conseils professionnels
- Les courbes avec rebond (valeurs Y >1 ou <0) créent des effets de spring élastique.
- Utilisez des accélérations différentes pour l'entrée et la sortie pour plus de réalisme.