Generador de curvas cubic-bezier para CSS
Arrastra los dos puntos de control para diseñar la curva de aceleración de una transición o animación CSS, compárala en vivo con una animación lineal y copia la función cubic-bezier() lista para usar.
Cómo usar el generador
- Arrastra el punto rosa (P1) y el azul (P2) sobre el gráfico, o escribe sus coordenadas en los campos x1, y1, x2, y2.
- Pulsa Reproducir: la bola verde usa tu curva y la gris avanza a velocidad constante, para que notes la diferencia.
- Prueba las curvas predefinidas como punto de partida y ajusta la duración.
- Copia el código y pégalo en tu
transitionoanimation.
Cómo funciona una curva de Bézier cúbica
La curva va siempre del punto P0 = (0, 0) al P3 = (1, 1). El eje horizontal es el tiempo transcurrido y el vertical el progreso de la animación. Tú defines los dos puntos de control intermedios, P1 = (x1, y1) y P2 = (x2, y2):
B(t) = (1 − t)³·P0 + 3(1 − t)²t·P1 + 3(1 − t)t²·P2 + t³·P3, con t de 0 a 1
Donde la curva es empinada, la animación va rápida; donde es plana, va lenta. La recta diagonal es la animación lineal. Como el tiempo no puede ir hacia atrás, x1 y x2 deben estar entre 0 y 1; en cambio, y1 e y2 pueden ser negativos o mayores que 1, lo que hace que el elemento retroceda un poco antes de salir o se pase del destino y vuelva (efecto «back» o rebote).
Curvas habituales y para qué sirven
| Nombre | cubic-bezier | Uso típico |
|---|---|---|
| ease | 0.25, 0.1, 0.25, 1 | Valor por defecto; cambios de color y hover |
| ease-in | 0.42, 0, 1, 1 | Elementos que salen de la pantalla |
| ease-out | 0, 0, 0.58, 1 | Elementos que entran (menús, notificaciones) |
| ease-in-out | 0.42, 0, 0.58, 1 | Desplazamientos dentro de la pantalla |
| Estándar (Material) | 0.4, 0, 0.2, 1 | Movimientos de interfaz en general |
| easeOutBack | 0.34, 1.56, 0.64, 1 | Botones o ventanas que «aterrizan» con un pequeño rebote |
Consejos para animaciones agradables
- Duraciones cortas: entre 150 y 300 ms para cambios pequeños (hover, botones) y hasta 500 ms para paneles grandes. Más tiempo hace que la interfaz parezca lenta.
- Anima transform y opacity: el navegador los mueve sin recalcular el diseño. Animar
width,topo una sombra en muchos elementos cuesta más. - Respeta la reducción de movimiento: usa
@media (prefers-reduced-motion: reduce)para desactivar o acortar animaciones a quien lo pida en su sistema. - Consistencia: define dos o tres curvas como variables CSS y reutilízalas, igual que haces con tus radios de esquina y degradados.
Si animas tamaños, piensa en unidades relativas (rem en lugar de px) para que la animación escale con la tipografía.
Preguntas frecuentes
¿Qué es cubic-bezier en CSS?
Es una función de temporización que define cómo avanza una animación a lo largo del tiempo mediante una curva de Bézier con dos puntos de control. Se usa en transition-timing-function y animation-timing-function.
¿Qué valores tiene la curva ease por defecto?
ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1): arranca algo rápido y frena suavemente. Es el valor por defecto de las transiciones CSS.
¿Por qué X debe estar entre 0 y 1?
El eje X representa el tiempo, que no puede retroceder: una curva con X fuera de 0–1 no sería una función y CSS la considera inválida. El eje Y (progreso) sí puede salir de ese rango para crear rebotes.
¿Qué curva uso para elementos que aparecen y desaparecen?
Para entradas, una curva de desaceleración (ease-out), porque el elemento llega rápido y se asienta; para salidas, una de aceleración (ease-in). Las transiciones entre estados en pantalla suelen ir bien con ease-in-out.