¿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.

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(...)]`.

Generador de Curva Cubic-Bezier CSS

Editor interactivo de `cubic-bezier(x1, y1, x2, y2)` para timing en CSS. Arrastra los dos handles, o escribe coordenadas. Y puede salir de [0, 1] para overshoot o anticipación. Un bloque preview anima ida y vuelta con tu curva para sentir el movimiento en la duración elegida. Presets cubren keywords CSS (ease, ease-in/out) y curvas custom útiles.

—

Presets

p1xp1yp2xp2y

Duración: 1.5s

Animación preview

CSS

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

Usa con transition-timing-function o animation-timing-function.

Cómo usar

Arrastra los handles azul y rojo para moldear la curva.
O elige un preset (ease, ease-in-out, overshoot…).
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

Generador de Animación CSS

Construye una animación CSS visualmente — elige preset, ajusta duración/easing/iteración, mira el preview y copia los keyframes.

Desarrollo 0 0

Generador de Gradientes CSS

Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.

Color 0 0

Generador de CSS Box Shadow

Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.

Color 0 0

Playground de Filtros CSS

Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.

Color 0 0

Generador de Border Radius

Arrastra esquinas por separado, prueba radios elípticos, copia el CSS — con presets chat-bubble, pill, blob y tab.

Color 0 0

Generador de Triángulos CSS

Genera triángulos CSS puros en 8 direcciones — usando border o clip-path, copia la regla y úsala.

Color 0 0