Easing
アニメーションの速度変化を制御するイージング関数。適切な使い分けで、自然で心地よいUIの動きを実現します。
Easing Functions
5種類の基本イージング関数
ease-linearcubic-bezier(0, 0, 1, 1)
一定速度、加減速なし
用途: プログレスバー、ローディングアニメーション
easecubic-bezier(0.25, 0.1, 0.25, 1)
ゆっくり始まり、素早く、ゆっくり終わる
用途: 汎用的なトランジション（デフォルト）
ease-incubic-bezier(0.42, 0, 1, 1)
ゆっくり始まり、素早く終わる
用途: 画面外へ出ていく要素
ease-outcubic-bezier(0, 0, 0.58, 1)
素早く始まり、ゆっくり終わる
用途: 画面内に入ってくる要素
ease-in-outcubic-bezier(0.42, 0, 0.58, 1)
ゆっくり始まり、ゆっくり終わる
用途: 状態の切り替え、トグル
Interactive Demo
各ボックスは異なるイージングで移動します（同じ時間）。
lineareaseease-inease-outease-in-outComponent Demo
実際のUIコンポーネントでイージングの効果を体験
Dropdown
ease-out + 200ms
Option 1
Option 2
Option 3
Modal
開く: ease-out / 閉じる: ease-in
Toast
ease-out + 300ms
Use Cases
各UIパターンに適したイージング関数
ホバーエフェクト
ease-out素早い反応、滑らかな終了
モーダルの開く
ease-out画面に入ってくる動き
モーダルの閉じる
ease-in画面から出ていく動き
スライダー
ease-in-out滑らかな双方向の動き
ローディング
linear一定速度の進行
ページ遷移
ease-in-out自然な速度変化
| パターン | 推奨イージング | 理由 |
|---|---|---|
| ホバーエフェクト | ease-out | 素早い反応、滑らかな終了 |
| モーダルの開く | ease-out | 画面に入ってくる動き |
| モーダルの閉じる | ease-in | 画面から出ていく動き |
| スライダー | ease-in-out | 滑らかな双方向の動き |
| ローディング | linear | 一定速度の進行 |
| ページ遷移 | ease-in-out | 自然な速度変化 |
Best Practices
✓
推奨
- ✓表示アニメーションにease-out
- ✓非表示アニメーションにease-in
- ✓状態切り替えにease-in-out
- ✓ホバー効果にease-out
✕
避けるべき
- ✗表示アニメーションにease-in
- ✗非表示アニメーションにease-out
- ✗すべてにlinearを使用
- ✗複雑なcubic-bezierの乱用