What is a cubic-bezier easing function?

A cubic Bezier curve is defined by four control points: a fixed start (0, 0), a fixed end (1, 1), and two adjustable points P1 (x1, y1) and P2 (x2, y2). CSS uses the shape of that curve as the time-to-progress mapping for a transition or animation. The X axis is time (0 to 1), and the Y axis is animation progress (0 to 1). Different curve shapes produce ease-in, ease-out, ease-in-out, or custom easings.

Why can the Y values be negative or greater than 1?

When Y goes outside [0, 1], the animation overshoots. A control point with y > 1 makes the value briefly exceed its end position before settling — useful for spring-like or playful 'bounce' effects. A negative y at the start makes the animation pull back before moving forward. X must stay in [0, 1] to keep the easing single-valued (no time-travel).

Is cubic-bezier supported in all browsers?

Yes. cubic-bezier() is part of CSS Transitions Module Level 1 and CSS Animations Module Level 1, supported in every browser since around 2010. The newer steps() and linear() functions joined it later for staircase and multi-segment curves, but cubic-bezier remains the workhorse for organic motion.

Should I use spring() or cubic-bezier?

CSS spring() (proposed but not yet shipped in any browser as of 2026) is physically based — you specify mass, stiffness, damping. cubic-bezier is artistic — you draw the curve you want. For predictable, designer-controlled motion, cubic-bezier wins. For physics-driven UIs (drag-to-snap, scroll-coupled motion), wait for spring() or use a JS animation library like Framer Motion.

What's the difference between transition-timing-function and animation-timing-function?

Both accept the same value, but they apply at different scopes. transition-timing-function eases the change between two state values (e.g., :hover to default). animation-timing-function eases each segment between two keyframes; if you set it on the @keyframes itself or on the animation shorthand, it applies to all segments unless overridden in a specific keyframe.

Generador CSS cubic-bezier

Diseña visualmente curvas de easing CSS cubic-bezier con un editor de puntos de control arrastrables y vista previa de animación en vivo.

Preajustes

Curva

Arrastra los puntos de control de colores para dar forma a la curva. Y puede bajar de 0 o superar 1 para conseguir rebote.

Duración de la animación: 1000ms

Vista previa en vivo

La intensidad del color muestrea la curva en 11 puntos de tiempo equidistantes.

Salida CSS

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

/* with shorthand */
transition: all 1000ms cubic-bezier(0.25, 0.1, 0.25, 1);

/* on a keyframe animation */
animation: my-anim 1000ms cubic-bezier(0.25, 0.1, 0.25, 1) infinite;

Cómo usar

Diseña visualmente curvas de easing CSS cubic-bezier con un editor de puntos de control arrastrables y vista previa de animación en vivo.

1Click a preset (ease, ease-in-out, ease-out-back, etc.) to load a starting curve.
2Drag the two colored control points on the curve panel to shape the easing — Y can extend beyond 0 and 1 for overshoot.
3Watch the live animation preview to feel the motion. Adjust the duration slider for slower or faster playback.
4Fine-tune by typing exact values into the x1 / y1 / x2 / y2 number fields.
5Click 'Copy' to copy the cubic-bezier(...) value, then paste it into your CSS transition or animation.

Características

Drag-to-edit control points with overshoot range — Y values can go negative or above 1 for spring-like motion
Eight presets including overshoot variants (ease-out-back, ease-in-out-back, elastic)
Live demo with adjustable duration and replay button — feel the curve before copying it
Numeric x1/y1/x2/y2 fields synced with the visual editor — precise tuning either way
Output includes the standalone cubic-bezier() value plus complete transition/animation snippets

Preguntas frecuentes

Más información

Cubic-Bezier Easing — How to Make CSS Animations That Feel Right