Cómo usar: Generador Cubic Bezier
- Arrastra las dos manijas moradas para dar forma a la curva, o escribe los cuatro números.
- Pulsa Play para comparar tu curva con un easing estándar como
ease. - Para un movimiento físico, cambia a Spring o Bounce y ajusta la rigidez, el amortiguamiento o los rebotes.
- Copia el valor para CSS, Tailwind, la Web Animations API, Framer Motion o GSAP.
¿Qué es un easing cubic-bezier?
Una curva de easing asigna el tiempo (eje x) al progreso (eje y). cubic-bezier(x1, y1, x2, y2) describe esa curva con dos puntos de control; el inicio (0,0) y el final (1,1) son fijos. Las curvas que suben rápido se sienten ágiles (ease-out), las que empiezan planas se sienten pesadas (ease-in), y los valores de y por encima de 1 o por debajo de 0 generan un efecto “back” juguetón con sobrepaso. Los valores de x deben mantenerse entre 0 y 1.
¿Qué easing debería usar?
| Movimiento | Easing | Por qué |
|---|---|---|
| Elemento que entra en pantalla | ease-out (p. ej. cubic-bezier(.16,1,.3,1)) | Llega rápido y se asienta con suavidad |
| Elemento que sale | ease-in | Acelera al alejarse |
| Movimiento dentro de la pantalla | ease-in-out | Inicio y final naturales |
| UI juguetona, interruptores | back / spring | Un pequeño sobrepaso da vida |
| Barras de progreso, spinners | linear | Velocidad constante |
Resortes y rebotes con linear()
Un cubic-bezier solo puede sobrepasar el destino una vez. Los resortes reales oscilan varias veces y las pelotas que rebotan golpean el suelo repetidamente, algo que requiere la función linear() de CSS: una lista de valores de progreso que el navegador une con líneas rectas. Esta herramienta simula un resorte (rigidez, amortiguamiento, masa) o una pelota que rebota, lo muestrea en linear() e indica la duración necesaria para que el movimiento se estabilice. linear() funciona en Chrome y Edge 113+, Firefox 112+ y Safari 17.2+; usa el cubic-bezier como alternativa para navegadores antiguos.
Usa tu curva en el generador de animaciones CSS o para loaders en el generador de loaders CSS.
También se busca como: easing css, cubic-bezier css, funciones de easing, animación spring css, easing linear(), generador de easing, curva bezier css.
Herramientas que combinan con: Generador Cubic Bezier
- Generador de Keyframes CSS — Un editor visual para @keyframes.
- Generador de efectos hover CSS — Diseña animaciones hover para botones, tarjetas, enlaces e iconos.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
Preguntas frecuentes
¿Los valores de y pueden superar 1 o quedar por debajo de 0?
¿Cómo uso un cubic-bezier en Tailwind?
ease-[cubic-bezier(0.16,1,0.3,1)], o añádelo a theme.extend.transitionTimingFunction. El panel de salida muestra ambas opciones.