〰️ Générateur CSS d'Easing et Timing d'Animation

Design CSS cubic-bezier easing curves visually. Drag handles, preview animations, pick from presets like ease, ease-in-out, spring. Copy CSS free.

Drag the two bezier control points to shape your animation curve, or pick from preset easings (ease, spring, bounce). The preview animates a ball using your curve so you see exactly how it feels — then copy the cubic-bezier() value for your CSS transition or animation.

P1 X

P1 Y

P2 X

P2 Y

CSS Value

How to Use

Drag the control points

Click and drag the two colored handles on the SVG canvas to define your easing curve shape.

Preview the animation

Click Play to see a box animate using your cubic-bezier curve. Try preset buttons for common easings.

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.