Curva cubic-bezier
Crea una curva de animación CSS arrastrando los manejadores, con vista previa animada.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Dibuja tu curva de animación
Arrastra los dos manejadores en el gráfico para dar forma a la aceleración, observa la bola animada reproducir el movimiento y copia el valor cubic-bezier() para tu CSS.
-
Parte de un preajuste
ease, ease-in-out, linear…
-
Ajusta los manejadores
X = tiempo (0–1), Y libre para el rebote.
-
Copia el CSS
Pega en transition o animation.
Los preajustes CSS
| Nombre | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
Las X se limitan a [0,1], las Y pueden sobrepasar para los rebotes. Vista previa con la Web Animations API, todo es local.
Preguntas frecuentes
¿Qué es una curva cubic-bezier?
Es la función de tiempo que describe cómo una animación acelera y desacelera. Se define por dos puntos de control (x1, y1, x2, y2). En CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
¿Por qué los valores Y pueden superar 1?
Los X quedan entre 0 y 1 (el tiempo), pero los Y pueden salir de [0,1] para crear un efecto de rebote o sobrepaso (el elemento va más lejos y vuelve). Así se obtienen las curvas «back» y elásticas.
¿Cómo lo uso en mi CSS?
Pega el valor en transition: all 0.3s cubic-bezier(…) o en animation-timing-function. La vista previa animada muestra el resultado real antes de pegar.
¿Cuáles son los preajustes estándar?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Parte de un preajuste y ajusta los manejadores.