Generador de curvas CSS cubic-bezier con vista previa
Genera una curva de aceleración CSS cubic-bezier con vista previa, en tu navegador.
🔒 100 % en el cliente — no se envía ningún dato
Esta herramienta crea curvas cubic-bezier para la aceleración de animaciones CSS, con una vista previa visual del movimiento. Arrastra los puntos de control y copia el valor listo para pegar en tu hoja de estilos. Todo se ejecuta 100% en tu navegador, sin ninguna dependencia externa.
What is it for?
- ▸ Crear una aceleración personalizada para una transición CSS fluida
- ▸ Reproducir una curva de aceleración ease-in-out a medida
- ▸ Previsualizar el movimiento de una animación antes de integrarla
- ▸ Copiar un valor cubic-bezier listo para una propiedad transition
FAQ
¿Qué es una función cubic-bezier en CSS?
Es una función de aceleración definida por cuatro valores que controlan cómo una animación o transición acelera y desacelera a lo largo del tiempo.
¿Cómo uso un valor cubic-bezier en mi CSS?
Copia el valor generado y colócalo en una propiedad transition-timing-function o animation-timing-function, por ejemplo cubic-bezier(0.25, 0.1, 0.25, 1).
¿Puedo crear un efecto de rebote con cubic-bezier?
Sí, colocando los puntos de control fuera del rango 0-1 en el eje vertical, la curva sobrepasa el objetivo y produce un efecto de rebote.