Generador de curvas cubic-bezier

La curva de aceleración (timing function) decide cómo avanza una transición o animación CSS en el tiempo. Arrastra los dos puntos de control, prueba el resultado en la animación de ejemplo y copia el valor cubic-bezier().

¿Qué es cubic-bezier()?

Las propiedades transition-timing-function y animation-timing-function (o el tercer valor de transition) indican cómo se reparte el cambio a lo largo de la duración. cubic-bezier(x1, y1, x2, y2) define una curva de Bézier cúbica que empieza en (0, 0) y termina en (1, 1) con dos puntos de control: el eje X es el tiempo y el Y, el progreso.

Las palabras clave de CSS son curvas predefinidas: ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1), ease-in a (0.42, 0, 1, 1), ease-out a (0, 0, 0.58, 1) y ease-in-out a (0.42, 0, 0.58, 1). Las easeIn…/easeOut… son las curvas clásicas de Robert Penner, muy usadas en librerías de animación.

Consejos

Los valores X tienen que estar entre 0 y 1, pero los Y pueden salirse: por debajo de 0 o por encima de 1 la animación «se pasa» y vuelve, un efecto de rebote suave como el de easeOutBack. Para elementos que aparecen en pantalla suelen funcionar mejor las curvas de salida (ease-out), que empiezan rápido y frenan al final; para los que se van, las de entrada (ease-in).

Las duraciones de 150 a 400 ms son las más habituales en interfaces. Recuerda respetar la preferencia prefers-reduced-motion de quienes prefieren menos animaciones.