用語集 · アニメーション
イージング
動きが開始から終了までの間に、どのように加速し減速するかを決める仕組み。
詳細
イージングがないと、オブジェクトは一定の速度で動き、動きが機械的に見えます。イージングがあると、ゆっくり始まって最後に減速するなど、実際の物体のように動きます。CSSでは ease、ease-out、ease-in-out といった名前があり、独自の曲線は cubic-bezier() で指定できます。back や elastic などの名前はCSSの曲線ではなく、GSAPのようなアニメーションライブラリの名前です。
実践的なルール：シーンに入ってくるものは、到着時に減速させるのが一般的です（ease-out）。退場するものは加速させるのが一般的です（ease-in）。非常に弾むような曲線は目を引きますが、バナー全体に使うと疲れてしまいます。
例
document.querySelector(".cta").animate({ transform: ["translateX(40px)", "none"] }, { duration: 600, easing: "ease-out" });