DeveloTools

Keyframe Curve Lab

Diseña y previsualiza curvas de easing cubic-bezier() de CSS visualmente.

100% en el cliente

Editor de curva

Vista previa

cubic-bezier(0.25, 0.1, 0.25, 1)
Preajuste: ease

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

En CSS, el "easing" controla la velocidad de una animación o transición a lo largo del tiempo — en vez de moverse a un ritmo constante, puede empezar lenta y acelerar, o al revés. cubic-bezier() es la función de CSS que define una curva de easing personalizada usando dos puntos de control arrastrables, dándote control total más allá de los presets incorporados como ease o ease-in-out. Esta herramienta te permite arrastrar esos puntos de control en un gráfico, previsualizar el movimiento resultante en vivo y copiar el valor CSS exacto.

Cómo usar Keyframe Curve Lab

  1. Arrastrá los dos controladores en el gráfico del Editor de curva, o elegí un punto de partida entre los presets (ease, ease-in, ease-out, ease-in-out, linear).
  2. Ajustá la curva numéricamente con los campos X1, Y1, X2, Y2.
  3. Mirá el movimiento en el panel Vista previa, haciendo clic en Repetir para verlo de nuevo.
  4. Hacé clic en Copiar para copiar el valor CSS cubic-bezier(...) final.

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

Herramientas relacionadas