Generador de cubic-bezier CSS

¿Qué es Generador de cubic-bezier CSS?

El generador de cubic-bezier CSS es un editor visual gratuito de las funciones de aceleración que usan las transiciones y animaciones de CSS, pensado para desarrolladores front-end y diseñadores de movimiento. En el modo cubic-bezier arrastras dos puntos de control (o los escribes) para dar forma a una curva: los valores x se mantienen en el rango legal de 0 a 1, mientras que los valores y pueden superar 1 o bajar de 0 para crear rebote y anticipación. Un modo steps() cubre la temporización escalonada con un número de pasos ajustable y un término de salto —jump-start, jump-end, jump-none o jump-both, donde step-start y step-end son steps(1, …)—. Una vista previa animada en vivo reproduce la aceleración actual sobre una caja que se mueve y escala durante la duración que fijes, puedes superponer cualquier preajuste como curva fantasma para comparar y puedes importar una cadena cubic-bezier() o steps() existente. Copia la declaración exacta para tu transition-timing-function o animation-timing-function.

Cómo usar Generador de cubic-bezier CSS

1. Elige el modo cubic-bezier() o steps() arriba, o abre Ajustes para partir de un preajuste como ease, ease-in-out o linear.
2. En el modo cubic-bezier, arrastra los dos tiradores del gráfico o escribe valores exactos de x1, y1, x2 e y2; sube y por encima de 1 para lograr rebote.
3. En el modo steps(), fija el número de pasos y elige un término de salto (jump-start, jump-end, jump-none o jump-both) para dibujar la escalera.
4. Pulsa Reproducir para ejecutar la animación en vivo sobre la caja que se mueve y escala, y ajusta la duración en segundos para sentir el ritmo.
5. Elige una curva de comparación en Ajustes para superponer un preajuste como fantasma en el mismo gráfico, o pega un valor en Importar y aplícalo.
6. Copia el valor cubic-bezier() o steps() generado en tu transition-timing-function o animation-timing-function.

Ejemplos

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

modo steps, N 4, jump-end

steps(4, jump-end)

Preguntas frecuentes

¿Qué significan los cuatro números de cubic-bezier?

Son las coordenadas de los dos puntos de control: x1, y1 para el primero y x2, y2 para el segundo. La curva siempre empieza en (0,0) y termina en (1,1); los puntos de control la curvan en medio, lo que controla cómo la propiedad animada acelera y frena a lo largo del tiempo.

¿Para qué sirve el modo steps()?

steps() salta entre un número fijo de valores en lugar de interpolar suavemente —útil para animaciones de sprites, contadores a saltos o efectos fotograma a fotograma—. Fija el número de pasos y un término de salto: jump-start, jump-end, jump-none o jump-both. step-start equivale a steps(1, jump-start) y step-end a steps(1, jump-end).

¿Cómo funciona la vista previa con animación en vivo?

Pulsa Reproducir y la caja se desplaza por la pista y se escala usando tu aceleración actual, yendo y viniendo. Cambia la duración en segundos para ralentizarla o acelerarla; usa animación CSS pura con tu valor cubic-bezier() o steps() como función de temporización.

¿Puedo importar un valor de aceleración existente?

Sí. Pega un valor cubic-bezier(...) o steps(...) —o una palabra clave como ease-in-out, step-start o step-end— en el campo Importar y aplícalo; el editor lo analiza de vuelta a los puntos de control o los ajustes de pasos.

¿Se envían mis datos a un servidor?

No. Todo el editor se ejecuta en tu navegador con JavaScript: los puntos de control y la curva se calculan localmente y nunca se suben, así que funciona de forma privada e incluso sin conexión una vez cargada la página.