Generador de cubic-bezier CSS

¿Qué es Generador de cubic-bezier CSS?

El generador de cubic-bezier CSS es un editor visual gratuito de la función de temporización cubic-bezier() que usan las transiciones y animaciones de CSS, pensado para desarrolladores front-end y diseñadores de movimiento. Elige un preajuste como ease, linear, ease-in, ease-out o ease-in-out, o ajusta tú mismo los dos puntos de control: los valores x se limitan al rango legal de 0 a 1, mientras que los valores y pueden superar 1 o bajar de 0 para crear rebote y anticipación. La vista previa traza la curva sobre un cuadrado unitario para que leas de un vistazo la aceleración y la desaceleración, y se produce la declaración exacta cubic-bezier(x1, y1, x2, y2) para que la copies. Úsalo siempre que una palabra clave integrada te parezca demasiado genérica y quieras un movimiento más ágil, más elástico o más pausado.

Cómo usar Generador de cubic-bezier CSS

1. Abre Ajustes y elige un preajuste de partida —ease, linear, ease-in, ease-out o ease-in-out— para sembrar los puntos de control.
2. Arrastra los dos tiradores redondos sobre la vista previa de la curva para reformar la aceleración, o escribe valores exactos en los campos x1, y1, x2 e y2.
3. Mantén x1 y x2 entre 0 y 1; sube y1 o y2 por encima de 1 o por debajo de 0 para añadir rebote o anticipación al movimiento.
4. Compara la curva con la línea base linear discontinua para juzgar cómo acelera y desacelera la aceleración.
5. Copia el valor cubic-bezier() generado y pégalo 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, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

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

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.

¿Por qué no puedo poner x1 o x2 por encima de 1?

La especificación CSS exige que las coordenadas x (de tiempo) de ambos puntos de control se queden entre 0 y 1, para que la función de temporización siga siendo una correspondencia válida entre progreso y salida. Esta herramienta limita los campos x y los tiradores a ese rango automáticamente. Los valores y, en cambio, pueden superar 1 o bajar de 0 para crear rebote o anticipación.

¿Cómo hago una aceleración con rebote o elástica?

Sube uno de los valores y por encima de 1 (para rebote al final) o por debajo de 0 (para anticipación al inicio). Por ejemplo, cubic-bezier(0.34, 1.56, 0.64, 1) se pasa antes de asentarse, dando una sensación de resorte sin nada de JavaScript.

¿Dónde uso el valor generado?

Pégalo como valor de transition-timing-function o animation-timing-function —por ejemplo transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)—. Sustituye palabras clave como ease o ease-in-out por tu curva personalizada.

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