Editor de Curvas Cubic-Bezier — Animaciones CSS
Diseñe visualmente las curvas de aceleración CSS cubic-bezier. Arrastre los puntos de control, vea una vista previa animada en vivo, elija presets y copie la función de tiempo.
Editor de Curvas Cubic-Bezier — Cree Curvas de Animación CSS Fluidas
Diseñe la curva de aceleración perfecta para sus animaciones y transiciones CSS. Arrastre los dos puntos de control para dar forma a la curva, vea una bola reproducir el movimiento en tiempo real, pruebe presets clásicos, y copie la función de tiempo cubic-bezier() directamente en su hoja de estilos.
¿Qué es una curva de aceleración?
La aceleración (easing) controla cómo una animación acelera y desacelera durante su duración. En lugar de moverse a velocidad constante (lineal), el movimiento del mundo real acelera y desacelera. CSS lo expresa con cubic-bezier(x1, y1, x2, y2) — cuatro números que definen una curva desde el inicio (0,0) hasta el final (1,1) usando dos puntos de control.
Cómo usarlo
- Arrastre las manijas rosas: cada una curva el trazado cerca del inicio o del final
- Observe la bola: la vista previa en vivo reproduce su aceleración en bucle para sentir el movimiento
- Sobrepaso: arrastre una manija por encima o debajo de la caja para crear efectos de rebote/anticipación (valores fuera de 0–1)
- Presets: empiece desde ease, linear, ease-in/out, o un rebote elástico
- Copie: obtenga el valor
cubic-bezier()listo
Entendiendo los cuatro números
- x1, y1: el primer punto de control — da forma al inicio de la animación
- x2, y2: el segundo punto de control — da forma al final
- Los valores X están bloqueados entre 0 y 1 (el tiempo no retrocede); los valores Y pueden exceder ese rango para el sobrepaso
Dónde usar el resultado
Pegue el valor en cualquier transición o animación CSS, por ejemplo: transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);. También funciona con animation-timing-function.
Privacidad
Esta herramienta funciona completamente en su navegador. Nada se sube ni se almacena.