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
Los valores Y fuera de 0–1 hacen que la animación se pase, creando efectos de rebote o anticipación.
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.
Paso a paso
- Elige un preajuste (ease, linear, ease-in, ease-out, ease-in-out o bounce) o arrastra los dos puntos de control de la curva.
- Pulsa Reproducir para ver cómo se mueve el objeto con esa curva.
- Copia la función con Copiar cubic-bezier y pégala en
transition-timing-functionoanimation-timing-function.
Preguntas frecuentes
¿Qué significan los cuatro números de cubic-bezier()?
Son las coordenadas x e y de los dos puntos de control de la curva. Los valores de x deben estar entre 0 y 1; los de y pueden salirse para crear efectos de rebote.
¿Qué diferencia hay entre ease-in y ease-out?
Ease-in empieza despacio y acelera; ease-out empieza rápido y frena al final. Ease-in-out combina ambos.
¿Funciona en todos los navegadores?
Sí. La función cubic-bezier() forma parte de CSS y la admiten todos los navegadores actuales.