¿Qué representa realmente una curva cubic-bezier?

El eje X es el tiempo, el eje Y la progresión. Una diagonal recta (`cubic-bezier(0, 0, 1, 1)` = `linear`) significa que la progresión es proporcional al tiempo - movimiento aburrido. Una curva en S (el `ease` por defecto) significa progresión lenta al inicio, rápida en medio, lenta al final - lo que el ojo espera de un objeto físico que acelera y luego decelera. Las dos manijas controlan cuán agresiva es esa curva en S.

¿Puede Y salir de 0..1?

Y sí - y así se consiguen rebote, dépassement y anticipación. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` se pasa al inicio y al final, produciendo una sensación de «goma elástica». X no - la spec exige que el eje del tiempo se quede en 0-1, si no el easing no sería una función y el navegador no podría muestrearlo. Arrastra la manija bajo 0 o por encima de 1 en Y para jugar con el dépassement.

¿Qué preajuste para qué tipo de animación?

Usa `ease-out` (o «decelerate» de Material) para elementos que entran a pantalla - parece que aterrizan suave. Usa `ease-in` («accelerate») para los que salen - parece que se los llevan. Usa `ease-in-out` («standard») para los que se mueven dentro de pantalla (slides de panel, flips de card). Usa `linear` solo para animaciones que se repiten (un spinner) - es el único easing que ciclea sin saltos visibles.

¿Por qué la curva «standard» de Material se siente distinta de `ease` CSS?

CSS `ease` es `cubic-bezier(0.25, 0.1, 0.25, 1)` - una curva en S suave. Material standard es `cubic-bezier(0.4, 0, 0.2, 1)` - decelerar más agresivo. La curva de Material se siente más «diseñada»: los elementos llegan rápido y se asientan despacio. CSS `ease` se eligió a finales de los 90 y precede a las convenciones modernas de motion; la mayoría de design systems lo sobrescribe.

¿Puedo usar cubic-bezier en JS?

Sí. GSAP, Framer Motion, Anime.js y la Web Animations API aceptan valores cubic-bezier. El nombre del prop varía (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), pero los cuatro números son universales - cópialos de este generador y funcionan en todas partes.

Generador cubic-bezier

Editor cubic-bezier visual con vista previa animada y 12 preajustes de easing estándar.

Preajustes

Arrastra los puntos naranja para moldear la curva.

CSS

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

Vista previa

Arrastra las dos manijas para modelar la curva. La bola de vista previa reproduce el easing en bucle - sientes el timing, no solo las matemáticas. Los preajustes cubren las cuatro palabras clave CSS (ease, ease-in, ease-out, ease-in-out) y las curvas canónicas de Material Design (standard, decelerate, accelerate, sharp). Los valores se acotan donde los navegadores lo exigen - X queda en 0-1, Y puede salir (negativo o >1) para rebote y anticipación.

Cómo usarla

Elige un preajuste
Palabras clave CSS (ease, ease-in, ease-out, ease-in-out) o curvas Material (standard, decelerate, accelerate, sharp) - un clic carga los valores.
Arrastra las manijas
P1 y P2 remodelan la curva. La bola animada se actualiza en vivo, así sientes el nuevo timing antes de confirmar.
Mira la vista previa
La bola reproduce el easing en bucle. Alterna entre movimiento, escala y opacidad para ver cómo la misma curva se siente en distintas propiedades.
Copia el valor
La cadena `cubic-bezier(x1, y1, x2, y2)` está lista para pegar en tu transición CSS, animación o prop de easing JS.

¿Qué es?

Cubic-bezier es el formato de función de easing que usan las transiciones CSS, las animaciones CSS, la Web Animations API y la mayoría de librerías JS de animación. Toma dos puntos de control (P1 y P2) dentro del cuadrado unidad; junto con el punto inicial implícito (0,0) y el final (1,1), definen una curva que mapea tiempo transcurrido a progresión. La forma de la curva es lo que hace que la animación se sienta seca, suave, elástica o robótica.

Cuándo usarla

Diseñar motion para un design system (qué curva para entrada, salida, movimiento en sitio), alinear con un lenguaje de motion concreto (Material, iOS, propio), crear feedback de clic elástico con curvas de dépassement, suavizar transiciones CSS en hover/focus, escoger el easing adecuado para animaciones de gráfico (linear para ejes, ease-out para barras), y explicar easing a tu equipo sin entrar en la fórmula.

Errores comunes

Usar `linear` para movimiento único - se siente mecánico porque ningún objeto real se mueve a velocidad constante. Elegir un easing distinto para cada transición de la UI - el motion inconsistente se siente sucio; los design systems fijan 3-5 curvas y las reutilizan. Olvidar que las curvas de dépassement pueden cortarse si la propiedad animada tiene límites (una rotación puede pasar; un slide que saldría de pantalla se ve roto). Animar propiedades lentas con curvas agresivas - un slide de 2 segundos con un ease-out duro parece un glitch.

Preguntas frecuentes

¿Qué representa realmente una curva cubic-bezier?: El eje X es el tiempo, el eje Y la progresión. Una diagonal recta (`cubic-bezier(0, 0, 1, 1)` = `linear`) significa que la progresión es proporcional al tiempo - movimiento aburrido. Una curva en S (el `ease` por defecto) significa progresión lenta al inicio, rápida en medio, lenta al final - lo que el ojo espera de un objeto físico que acelera y luego decelera. Las dos manijas controlan cuán agresiva es esa curva en S.
¿Puede Y salir de 0..1?: Y sí - y así se consiguen rebote, dépassement y anticipación. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` se pasa al inicio y al final, produciendo una sensación de «goma elástica». X no - la spec exige que el eje del tiempo se quede en 0-1, si no el easing no sería una función y el navegador no podría muestrearlo. Arrastra la manija bajo 0 o por encima de 1 en Y para jugar con el dépassement.
¿Qué preajuste para qué tipo de animación?: Usa `ease-out` (o «decelerate» de Material) para elementos que entran a pantalla - parece que aterrizan suave. Usa `ease-in` («accelerate») para los que salen - parece que se los llevan. Usa `ease-in-out` («standard») para los que se mueven dentro de pantalla (slides de panel, flips de card). Usa `linear` solo para animaciones que se repiten (un spinner) - es el único easing que ciclea sin saltos visibles.
¿Por qué la curva «standard» de Material se siente distinta de `ease` CSS?: CSS `ease` es `cubic-bezier(0.25, 0.1, 0.25, 1)` - una curva en S suave. Material standard es `cubic-bezier(0.4, 0, 0.2, 1)` - decelerar más agresivo. La curva de Material se siente más «diseñada»: los elementos llegan rápido y se asientan despacio. CSS `ease` se eligió a finales de los 90 y precede a las convenciones modernas de motion; la mayoría de design systems lo sobrescribe.
¿Puedo usar cubic-bezier en JS?: Sí. GSAP, Framer Motion, Anime.js y la Web Animations API aceptan valores cubic-bezier. El nombre del prop varía (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), pero los cuatro números son universales - cópialos de este generador y funcionan en todas partes.