Este generador cubic-bezier te permite crear curvas de aceleración personalizadas para tus animaciones CSS arrastrando los dos puntos de control. Verás la curva, podrás previsualizar el movimiento y copiar el valor cubic-bezier() listo para tu transition o animation. Funciona en tu navegador, sin registro y en español.
Cómo crear una curva cubic-bezier
- Arrastra el punto verde (P1) y el punto rosa (P2) para dar forma a la curva.
- O parte de una plantilla (ease, ease-in-out, rebote…).
- Pulsa Reproducir para ver el movimiento y copia el código.
Qué es cubic-bezier en CSS
La función cubic-bezier(x1, y1, x2, y2) define cómo evoluciona una animación en el tiempo: si empieza lenta y acelera, si rebota al final, etc. Es la forma avanzada de la timing-function. Los valores de X van de 0 a 1; los de Y pueden salirse de ese rango para crear rebotes. Úsala junto a nuestro generador de transiciones CSS.
Preguntas frecuentes
¿Por qué mi curva se sale del recuadro?
Es normal y útil: cuando la Y supera 1 o baja de 0, la animación «se pasa» y vuelve, creando un efecto de rebote o elástico.
¿Dónde pego el valor cubic-bezier?
En la transition-timing-function o en animation-timing-function, en lugar de palabras como ease o linear.
¿Funciona en todos los navegadores?
Sí, cubic-bezier() tiene soporte total en los navegadores modernos.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
