宮本です。今回はcssのアニメーションや動画編集でよく使うイージングについてのお話です。私がコーディングする際にcssアニメーションを設定する際にイージングを必ず入れるようにしています。

しかし、イージングにもいくつか種類があり私自身「あれ？イーズアウトって先速いんだっけ….どっちだったっけ..？」とどのイージングがどの動きをするのかがまれに混じってしまう時があります。そこで私自身の認識の再確認も兼ねてイージングについてのまとめを今回解説していこうと思います。

イージングとは

イージングとは、アニメーションにおける動きの加減速（速度変化）を制御する手法や概念のことで、動きに個性を与える重要な要素です。適切なイージングを設定することで演出の印象が大きく変わり、UIのユーザー体験をデザインする上でも欠かせない役割を果たします。

アニメーションの動き方は大きく以下の4種類のイージングに分類できます。

• リニア (linear) – 等速で変化する（常に一定の速度で動く）。
• イーズイン (ease-in) – 徐々に加速する（動き始めがゆっくりで後半に向けて速くなる）。
• イーズアウト (ease-out) – 徐々に減速する（動き始めが速く終わり際にゆっくりと減速する）。
• イーズインアウト (ease-in-out) – ゆっくり始まり、中盤で速くなり、最後にまたゆっくりになる

CSSアニメーションにおけるイージング

CSSでは、上記のようなlinearやease-in、ease-out、ease-in-outといったイージング関数を、アニメーションやトランジションに対して指定できます。指定にはanimation-timing-function（CSSアニメーションの場合）やtransition-timing-function（CSSトランジションの場合）プロパティを使用し、以下のように記述します。

/* トランジションでイージングを指定する例 */ 
.button { transition: transform 0.25s ease-out; }

/* アニメーションでイージングを指定する例 */
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadein 1s ease-in-out;
}

上記の例では、ボタン要素のホバー時にtransformのトランジションをease-outで実行し、別の要素ではフェードインのアニメーションをease-in-outで適用しています。なお、CSSではtransition-timing-functionやanimation-timing-functionを指定しない場合、デフォルト値としてease（緩やかな加速と減速）が適用されます。

easeは適度な加速と減速（余韻）を備えた汎用的なイージングで、多くの場面で違和感なく利用できます。イージングの指定に迷った場合は一旦easeを使うのも良いかと思います。しかし、ease-in・ease-out・ease-in-outといったプリセットは緩急の変化が比較的弱く、動きに明確なメリハリを付けたい場合には不向きです。そのため、物足りないと感じる場合はデフォルトのeaseではなくcubic-bezier()関数を使って独自のイージングカーブを設定することが有効です。

After Effectsにおけるイージング

Adobe After Effects（以下AE）でも、オブジェクトの動きに緩急をつけるためにイージングを活用します。AEではキーフレーム間の補間に対してイージングを適用し、速度変化のカーブを調整します。イージングを使わず線形補間のままでは動きに一定の速度しか生まれませんが、イージングを行うことで素材の動きに緩急がつき、見栄えが格段に良くなります。モーショングラフィックスや動画制作の現場において、イージングは作品のクオリティを左右する欠かせない要素となっています。

イージーイーズは開始と終了の両側に緩急が付くイージングで、最も頻繁に使われる基本的な方法です。動き始めはゆっくりで中間で速度が上がり、終了時に再びゆるやかに減速するため、とても心地よい動きになります。モーショングラフィックスの制作において、このイージーイーズは事実上標準とも言える存在で、使われていない作品はほとんど無いほど多用されています。

イージーイーズイン（Ease In）は動きの終わり側にだけイージング（減速）をかける手法です。最初に一気に加速した後、終点のキーフレームに向かって徐々に減速し滑らかに停止します。自然なブレーキを表現できるため、特に物体が止まる動きで多用され、イージーイーズに次いで使用頻度が高い種類と言えるでしょう。

イージーイーズアウト（Ease Out）は動きの開始側にイージング（加速）をかける手法で、ゆるやかに動き始めてから徐々に加速していきます。終点では減速せず急に止まる動きになるため、汎用的な動作としてはやや扱いが難しいものの、オブジェクトが画面外へ勢いよく飛び出すような表現など、特定の用途では効果を発揮します。

まとめ

CSSアニメーションとAfter Effectsにおけるイージングについて、それぞれの基本と特徴をお話ししました。適切なイージングを活用することで、アニメーションの印象や質は大きく向上します。習得には多少の試行錯誤が必要かもしれませんが、その仕組みを理解し使いこなえるようになれば、表現の幅は飛躍的に広がるでしょう。

また、cssでは解説でも使用したツール（https://cubic-bezier.com/）やAEではプラグインなどもありますのでそちらを活用してみることで理想のアニメーションにより近づけることができるのではないかと思います。

まだイージングを十分に活用していないという方も、この機会にぜひチャレンジしてみてください。