01
Elegir una base cercana al efecto
Para entradas prueba ease-out; para cambios de estado compara ease y Material estándar. Un preajuste coloca los cuatro valores a la vez. Si luego mueves un control, el selector pasa a Personalizado.
HTML, CSS y código frontend
Generador de cubic-bezierPrueba el movimiento antes de copiar
Arrastra los controles o escribe cuatro números; revisa la animación antes de copiar el CSS.
Generador de cubic-bezier
Curva de entrada
Arrastra los puntos o usa las flechas; con Mayús el paso es mayor.
Resultado CSS
cubic-bezier(0.25, 0.1, 0.25, 1)Vista previa del movimiento
La curva se procesa en este navegador y no se envía a un servidor.
Opciones
La diagonal discontinua representa avance constante.
Curva actualizada.
Una transición que se siente lenta o brusca suele necesitar otro arranque o final, no solo menos milisegundos. El Generador de cubic-bezier muestra ambos puntos de control para que ajustes las curvas de easing CSS a partir de un preset conocido.
También puedes pegar una función anterior y conservar sus decimales. La vista previa de animación y la diagonal lineal permiten distinguir una curva de easing CSS suave de una que se pasa del destino antes de volver.
¿Por qué usar el Generador de cubic-bezier?
La curva, los valores y el movimiento del navegador se revisan juntos.
Arrastre y números precisos sincronizados
Los dos puntos de control y X1, Y1, X2, Y2 siempre describen la misma curva. El Generador de cubic-bezier acepta una función de tu hoja de estilos y conserva la precisión escrita, sin recortar todos los decimales a dos cifras.
Un X erróneo no se transforma en silencio
CSS limita X1 y X2 a 0–1, pero deja que Y salga de ese intervalo. El Generador de cubic-bezier detiene el arrastre de X en el borde; si escribes un X inválido, conserva el texto y señala el campo. Un Y mayor que 1 sigue permitiendo un sobreimpulso.
Tres comprobaciones antes de llevar la curva a CSS
02
Afinar inicio y final por separado
El primer punto influye sobre el arranque y el segundo sobre la llegada. El arrastre de X se detiene en 0 o 1; un X escrito fuera de rango produce error. Y puede bajar de 0 o subir de 1 para anticipar o rebasar el final.
03
Repetir la prueba a la duración real
La vista previa empieza en 1000 ms y solo se mueve al pulsar Reproducir. Su duración no se añade a la función copiada. Con actualización automática desactivada, Ctrl/Cmd+Enter genera el resultado actual.
Editar una curva y verificar su CSS
Cuatro entradas para los mismos controles
Arrastre, teclado, campos numéricos e importación modifican los mismos puntos de control. Este editor de curvas Bézier añade una referencia lineal para ver dónde la curva se adelanta o retrasa respecto al avance uniforme.
Movimiento medido por el navegador
La animación usa la función cubic-bezier() resultante como easing real del navegador. No trata el parámetro interno de la curva como si fuera el tiempo transcurrido; se reproduce una vez cuando lo pides.
Dos formatos CSS para copiar
Puedes copiar solo la función o una declaración transition-timing-function. Si cambias cualquier valor u opción, ambos botones quedan inactivos hasta que el resultado vuelva a estar actualizado.
Rangos válidos y movimientos que quedan fuera
- X tiene límites; Y puede rebasarlos
- X1 y X2 deben estar entre 0 y 1. El punto arrastrado se detiene en el borde, mientras que un X importado o escrito fuera de rango permanece visible con un error. Y negativo o mayor que 1 es CSS válido.
- Un tramo no crea un resorte
- Una sola función cubic-bezier() puede anticipar o rebasar el destino una vez. No representa rebotes repetidos, física de resortes ni una secuencia completa de @keyframes.
- La duración solo modifica la prueba
- Introduce milisegundos positivos y finitos. Cambiarlos no altera las cuatro coordenadas ni la función copiada, y la vista previa no entra en bucle.
- Salida limitada a easing CSS
- No lee hojas de estilo completas, archivos ni URL. Tampoco mantiene bibliotecas de preajustes o genera código Tailwind, GSAP, JavaScript ni animaciones completas.
Preguntas sobre el Generador de cubic-bezier
¿Qué significan los cuatro números de cubic-bezier()?
Son X1, Y1, X2 e Y2: las coordenadas de dos puntos de control entre el inicio fijo (0,0) y el final fijo (1,1). X representa el tiempo de entrada e Y el progreso resultante.
¿Por qué los valores de x deben mantenerse entre 0 y 1?
La coordenada X representa el avance del tiempo en ese tramo. La sintaxis CSS exige que ambos X estén en ese intervalo; el editor avisa si un valor escrito lo incumple y no lo recorta por ti.
¿Cómo hago un easing con rebote o sobreimpulso?
Sube Y2 por encima de 1 o selecciona el preajuste de un solo sobreimpulso. Verás que el movimiento pasa brevemente del destino y vuelve. Para varios rebotes necesitas keyframes o un modelo de resorte.
¿Cuál es la diferencia entre ease y ease-in-out?
ease tiene un inicio y un final asimétricos; ease-in-out reparte de forma más equilibrada la aceleración y la desaceleración. Pruébalos con igual duración para comparar el cambio de ritmo.
¿Puedo usar este valor también para animation-timing-function?
Sí. Coloca la función copiada en animation-timing-function o en la propiedad abreviada animation. La herramienta no crea los fotogramas clave, la duración ni las repeticiones.
¿Te queda alguna duda?
Prueba tu transición en el Generador de cubic-bezier
Carga la función que ya usas, reprodúcela con la duración prevista y copia el valor válido. El Generador de cubic-bezier mantiene visibles controles y números mientras ajustas el resultado.