はじめに
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デザインの完成度は大きく向上します。