Generador de Curva Cubic-Bezier CSS

Cómo usar

1. Arrastra los handles azul y rojo para moldear la curva.
2. O elige un preset (ease, ease-in-out, overshoot…).
3. Play para sentir el movimiento en la duración, copia el CSS.

Preguntas frecuentes

¿Por qué Y > 1 o < 0?

Overshoot ('rebote') y anticipación ('wind-up') necesitan Y fuera de [0, 1]. CSS lo permite — el valor animado puede pasar brevemente del target antes de asentarse.

¿Y los X?

CSS restringe X1 y X2 a [0, 1] para que la curva sea función del tiempo. El slider lo limita para X pero permite Y > 1 / < 0 para overshoot.

¿Diferencia con springs?

Cubic-bezier es curva determinística sobre tiempo fijo. Springs (`linear(...)` o JS) modelan física real — modelo distinto, sensación similar en casos simples.

¿Dónde lo uso en CSS?

`transition-timing-function: cubic-bezier(...)` para transiciones, o `animation-timing-function:` para keyframes. Tailwind: `ease-[cubic-bezier(...)]`.

Herramientas relacionadas