Generador de Cubic Bezier - Editor Visual de Curvas de Animación CSS
Generador de Cubic Bezier
Arrastre los puntos para diseñar una función de tiempo CSS
Arrastre para Diseñar
Mueva los dos puntos del gráfico o escriba valores exactos para cada punto de control.
Véalo en Movimiento
Una animación en vivo compara su curva con una lineal para que note la diferencia.
Valores Útiles
Palabras clave de CSS y curvas cubic, expo y back populares que se pasan y rebotan.
Privado
Todo se ejecuta en su navegador; nada de lo que pegue se sube.
Cómo Funcionan las Curvas de Animación
Una función de tiempo relaciona el tiempo transcurrido (eje horizontal) con el progreso de la animación (eje vertical). cubic-bezier(x1, y1, x2, y2) describe una curva de (0, 0) a (1, 1) curvada hacia dos puntos de control. Los valores x deben estar entre 0 y 1 porque el tiempo no puede ir hacia atrás, pero y puede bajar de 0 o pasar de 1, lo que hace que la animación se pase y vuelva, como en los valores «back».
Las curvas ease-out (inicio rápido, final suave) resultan ágiles para elementos que entran en pantalla; ease-in conviene a los que salen; ease-in-out encaja con elementos que se desplazan de un sitio a otro. Mantenga las transiciones de interfaz cortas, normalmente de 150 a 400 ms, y respete a quien pide menos movimiento con la media query prefers-reduced-motion.
Puntos Clave
- x entre 0 y 1: El tiempo solo avanza; y puede pasarse.
- Ease-out para entradas: Inicio rápido, llegada suave.
- Menos movimiento: Respete prefers-reduced-motion.