Xerador de curvas cubic-bezier

A curva de aceleración (timing function) decide como avanza no tempo unha transición ou animación CSS. Arrastra os dous puntos de control, proba o resultado na animación de exemplo e copia o valor cubic-bezier().

Que é cubic-bezier()?

As propiedades transition-timing-function e animation-timing-function (ou o terceiro valor de transition) indican como se reparte o cambio ao longo da duración. cubic-bezier(x1, y1, x2, y2) define unha curva de Bézier cúbica que comeza en (0, 0) e remata en (1, 1) con dous puntos de control: o eixo X é o tempo e o Y, o progreso.

As palabras clave do 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) e ease-in-out a (0.42, 0, 0.58, 1). As easeIn…/easeOut… son as curvas clásicas de Robert Penner, moi usadas en bibliotecas de animación.

Consellos

Os valores X teñen que estar entre 0 e 1, pero os Y poden saír: por debaixo de 0 ou por riba de 1 a animación «pásase» e volve, un efecto de rebote suave como o de easeOutBack. Para os elementos que aparecen na pantalla adoitan funcionar mellor as curvas de saída (ease-out), que comezan rápido e frean ao final; para os que se van, as de entrada (ease-in).

As duracións de 150 a 400 ms son as máis habituais nas interfaces. Lembra respectar a preferencia prefers-reduced-motion de quen prefire menos animacións.