CSSトランジションのタイミング関数比較 — ease vs linear vs ease-in-out

タイミング関数の比較

CSSは5つの組み込みタイミング関数キーワードを提供し、それぞれ異なるアニメーションの感触を生み出します。適切なものを選ぶことは、自然な感触のトランジションに不可欠です。

5つの組み込みカーブ

linear — cubic-bezier(0, 0, 1, 1) 最初から最後まで一定速度。要素は全体を通じて同じ速度で移動します。UIトランジションでは自然に感じることはまれですが、プログレスバー、ローディングインジケータ、連続アニメーションには適しています。

ease — cubic-bezier(0.25, 0.1, 0.25, 1) デフォルトのタイミング関数。速い開始、遅い終了。ほとんどのトランジションに適した汎用的な選択。

ease-in — cubic-bezier(0.42, 0, 1, 1) 遅い開始、速い終了。アニメーションが勢いをつけます。要素がビューポートから退出する退出アニメーションに最適。

ease-out — cubic-bezier(0, 0, 0.58, 1) 速い開始、遅い終了。アニメーションが自然に減速します。要素がビューに入る入場アニメーションに最適。

ease-in-out — cubic-bezier(0.42, 0, 0.58, 1) 遅い開始、速い中間、遅い終了。対称的な加速。要素が画面上に留まるトランジション（例：色の変化、位置のシフト）に最適。

実用的な推奨事項

/* 入場（要素の出現）*/
.modal-enter { transition: transform 0.3s ease-out; }

/* 退場（要素の消失）*/
.modal-exit { transition: transform 0.2s ease-in; }

/* 状態変化（要素は表示されたまま）*/
.button:hover { transition: background-color 0.2s ease-in-out; }

/* プログレスインジケータ */
.progress-bar { transition: width 0.5s linear; }

UXの原則

タイミング関数をアニメーション方向に一致させることで、自然な動きが生まれます：

• 画面に入るオブジェクトは既に動いており（速い開始）、静止する（遅い終了）= ease-out
• 画面を去るオブジェクトは静止から始まり（遅い開始）、加速して去る（速い終了）= ease-in
• その場で変化するオブジェクトは対称的な動き = ease-in-out