Easing

Em detalhe

Sem easing, um objeto se move em velocidade constante e o movimento parece mecânico. Com easing, ele começa devagar e termina desacelerando (ou o contrário), como fazem os objetos reais. No CSS, as curvas têm nomes como ease, ease-out ou ease-in-out, ou podem ser escritas com cubic-bezier() para curvas próprias. Nomes como back ou elastic não são curvas CSS: são nomes de bibliotecas de animação, como o GSAP.

Regra prática: o que entra na cena costuma desacelerar ao chegar (ease-out); o que sai costuma acelerar (ease-in). Curvas muito elásticas chamam a atenção, mas cansam se forem usadas em todo o banner.

document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });

Termos relacionados

Onde aparece