Glosario · Animación
Easing
La forma en que un movimiento acelera y frena entre su inicio y su final.
En detalle
Sin easing, un objeto se mueve a velocidad constante y el movimiento se ve mecánico. Con easing, arranca despacio y termina frenando (o al revés), como lo hacen los objetos reales. En CSS, las curvas tienen nombres como ease, ease-out o ease-in-out, o se escriben con cubic-bezier() para curvas propias. Nombres como back o elastic no son curvas CSS: son nombres de librerías de animación, como GSAP.
Regla práctica: lo que entra a la escena suele frenar al llegar (ease-out); lo que sale suele acelerar (ease-in). Las curvas muy elásticas llaman la atención, pero cansan si se usan en todo el banner.
Ejemplo
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });