緩急
Slow In and Slow Out (Ease In and Ease Out)
https://scrapbox.io/files/6a0419c05c3c134ed433d25e.gif
原理
物理世界の物体は等速で動き始めたり止まったりしない。重力・摩擦・筋肉の収縮など全ての力は連続的に作用するため、必ず加速と減速の過程を伴う。これを再現することでアニメーションが自然に見える。
実装としては、動作の始点と終点付近に多くのフレームを置き、中間を少なくする。1秒間の動きを12フレームで構成する場合、両端に3-4枚ずつ、中間に4-6枚という配分になる。
線形と非線形の対比
等速の直線的な動き（リニア）は、機械的・人工的な印象を与える。逆に、適切なイージングがかかった動きは生き物のように感じられる。「等間隔で動くボールがロボット的に見えるのは、機械的ロボットの動きを真似ているから」という説明がよくなされる。
UI/UXデザインの世界では、リニアモーションは基本的に「失敗」として扱われ、cubic-bezierなどの曲線を使ったイージングが標準となっている。Material Designなど主要なデザインシステムには「ease-snappy」「ease-gentle」といった独自のイージングトークンが定義されている。 モーショングラフィックスでの応用
After EffectsやPremiere Proのキーフレームには標準でイージング機能（Easy Ease、F9キーで適用）が搭載されており、グラフエディタで詳細な3次ベジェ曲線を制御できる。実務では「ease in」「ease out」の使い分けが重要で、画面に入ってくる要素にはease out（速く到着して止まる）、出ていく要素にはease in（ゆっくり加速して去る）が定石。 参考文献・出典
「Twelve basic principles of animation」Wikipedia
「Easing Functions Explained」SVGator
「Animation Principles in UI Design: Understanding Easing」Medium
「How to use easing for smooth animation in After Effects」We Design Motion