Keyframe Curve Lab

Cómo funciona el easing cubic-bezier()

Una función de temporización cubic-bezier(x1, y1, x2, y2) de CSS es una curva paramétrica con un punto de inicio fijo (0, 0) y un punto final fijo (1, 1). Los dos puntos de control que arrastras, P1 y P2, definen la forma de la curva entre ambos. Para un parámetro t de 0 a 1, la posición de la curva es:

B(t) = (1-t)³ P0 + 3(1-t)² t P1 + 3(1-t) t² P2 + t³ P3

P0 = (0, 0)      -- inicio de la animación, fijo
P3 = (1, 1)      -- fin de la animación, fijo
P1 = (x1, y1)    -- arrastrable, x1 en [0, 1]
P2 = (x2, y2)    -- arrastrable, x2 en [0, 1]

El eje x es el progreso del tiempo de la animación, que los navegadores limitan a [0, 1] porque el tiempo solo avanza. El eje y es el progreso de salida (cuánto se movió la propiedad animada hacia su valor final) y puede salir de [0, 1] — un y mayor que 1 o menor que 0 es exactamente lo que produce los efectos de sobrepaso y rebote, aunque los preajustes de esta herramienta no los usan.

Preguntas frecuentes

¿Qué es una curva de easing cubic-bezier()?

Es una función de temporización de CSS definida por dos puntos de control, cubic-bezier(x1, y1, x2, y2), que asocia el progreso del tiempo (x, de 0 a 1) con el progreso de salida (y). Controla cómo acelera y desacelera una transición o animación de CSS.

¿Por qué x está limitado a 0–1 pero y no?

X representa el tiempo, que solo avanza desde el inicio (0) hasta el final (1), así que los navegadores lo limitan a ese rango. Y representa el progreso de salida y puede bajar de 0 o superar 1, lo que produce efectos de rebote y sobrepaso.

¿Cómo uso la curva generada en CSS?

Copia la cadena cubic-bezier(...) y úsala como valor de transition-timing-function o animation-timing-function, por ejemplo: transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

¿Cómo se corresponden las palabras clave con los valores de cubic-bezier()?

Las palabras clave de easing de CSS son atajos para puntos de control fijos: ease es cubic-bezier(0.25, 0.1, 0.25, 1), ease-in es cubic-bezier(0.42, 0, 1, 1), ease-out es cubic-bezier(0, 0, 0.58, 1) y ease-in-out es cubic-bezier(0.42, 0, 0.58, 1).