はじめに

Webデザインにおいて、アニメーションはユーザー体験を向上させる重要な要素です。その中でも、CSSのtransitionやanimationでよく使われるのがイージング関数です。
イージングを使うことで、動きがより自然になり、ユーザーに快適な印象を与えることができます。今回はその中でも代表的なease-inとease-outの違いと使い分けについて解説します。

ease-inの特徴

動き始めがゆっくりで、最後に向かって加速するアニメーション
ユーザーに「これから動き出す」という印象を与える
主に 登場アニメーション（フェードイン、ズームインなど）で使われる

例: ボタンが画面に入ってくるときにease-inを使うと「自然に現れる」印象を与えられます。

style.css

.box {
  transition: transform 0.5s ease-in;
}

ease-outの特徴

動き始めが速く、終わりに向かって減速するアニメーション
ユーザーに「落ち着いて止まる」という印象を与える
主に退出アニメーション（フェードアウト、ズームアウトなど）やクリック後の動きで使われる

例: モーダルウィンドウを閉じるときにease-outを使うと、自然に消えていく感覚になります。

style.css

.modal {
  transition: opacity 0.5s ease-out;
}

両者の使い分け

登場する動き → ease-in（自然に現れる）
消えていく動き → ease-out（自然に止まる）
一連の動作で強調したい方向がある場合 →
始まりを強調したい：ease-in
終わりを強調したい：ease-out

👉 よくあるパターンとして、「登場＝ease-in」「退出＝ease-out」という組み合わせが直感的で分かりやすいです。

その他のイージング関数

ease-in-out

始まりも終わりも緩やかで、中盤はスピードが速い
自然で落ち着いた動きを表現できるため、もっとも汎用的に使われる
「登場・退出の両方で違和感なく使える万能型」

style.css

.box {
  transition: transform 0.6s ease-in-out;
}

linear

一定の速度で動き続ける
機械的な動きに見えるため、アニメーション表現よりもローディングバーや時間経過を表す動きに適している

style.css

.progress {
  transition: width 2s linear;
}

cubic-bezier()

オリジナルのイージングを作成可能
cubic-bezier(x1, y1, x2, y2) の4点を指定して自由に曲線を定義する
UIのトレンドに合わせた「個性ある動き」を作れるため、デザイナーがよく使う

例: 少し弾むような動きを表現

style.css

.button {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

最後に

ease-inとease-outは、シンプルながらもアニメーションの印象を大きく左右します。
動き始めを自然に見せたいのか、終わりを自然に見せたいのか――その違いを理解して使い分けることで、Webデザインの完成度は大きく向上します。