Generador de easing cubic-bezier
Crea easing cubic-bezier con 4 valores de control, previsualiza el movimiento y copia el CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Con cuatro valores de control (x1, y1, x2, y2) creas la curva de aceleración y desaceleración (cubic-bezier) de tus animaciones CSS. Puedes ver a la vez la gráfica de la curva de easing y una vista previa que se mueve de verdad, y copiar directamente el CSS de transition o timing-function.
Cómo usar
- Pulsa un preajuste como ease-in-out o back-out para tener un punto de partida.
- Ajusta la curva con precisión mediante los deslizadores (o la entrada numérica) de x1, y1, x2 y y2.
- Comprueba el movimiento con la gráfica de la curva y la vista previa de la figura que va y viene.
- Fija la duración y copia luego el CSS de transition o de timing-function.
Preguntas frecuentes
- ¿El valor de y puede ser mayor que 1 o menor que 0?
- Sí. El valor de x es el eje del tiempo y debe estar entre 0 y 1, pero el valor de y es el progreso y puede superar 1 o bajar de 0. Así se crea el efecto de «rebote» (overshoot), en el que el movimiento se pasa del destino y vuelve.
- ¿El movimiento de la vista previa es igual que el real?
- La vista previa se renderiza con la transition CSS real del navegador, así que se mueve exactamente igual que al aplicarla en la web desde el mismo navegador. La figura va y viene de forma repetida para mostrar la aceleración y la desaceleración de la curva.
- ¿Debo copiar transition o timing-function?
- Si necesitas una línea que incluya la duración, usa «Copiar transition»; si solo quieres meter la curva de easing en otra regla, usa «Copiar timing-function». Ninguno de los dos valores es una aproximación de referencia, sino CSS exacto listo para usar.