Generador de corbes cubic-bezier

La corba d'acceleració (timing function) decideix com avança en el temps una transició o animació CSS. Arrossega els dos punts de control, prova el resultat a l'animació d'exemple i copia el valor cubic-bezier().

Què és cubic-bezier()?

Les propietats transition-timing-function i animation-timing-function (o el tercer valor de transition) indiquen com es reparteix el canvi al llarg de la durada. cubic-bezier(x1, y1, x2, y2) defineix una corba de Bézier cúbica que comença a (0, 0) i acaba a (1, 1) amb dos punts de control: l'eix X és el temps i l'Y, el progrés.

Les paraules clau del CSS són corbes predefinides: ease equival 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) i ease-in-out a (0.42, 0, 0.58, 1). Les easeIn…/easeOut… són les corbes clàssiques de Robert Penner, molt utilitzades a les llibreries d'animació.

Consells

Els valors X han d'estar entre 0 i 1, però els Y poden sortir-ne: per sota de 0 o per sobre d'1 l'animació «es passa» i torna, un efecte de rebot suau com el d'easeOutBack. Per als elements que apareixen a la pantalla solen funcionar millor les corbes de sortida (ease-out), que comencen ràpid i frenen al final; per als que se'n van, les d'entrada (ease-in).

Les durades de 150 a 400 ms són les més habituals a les interfícies. Recorda respectar la preferència prefers-reduced-motion de qui prefereix menys animacions.