Subtle Ease — CSSデフォルトのease関数

デフォルトのease関数

transition: opacity 300msとタイミング関数を指定せずに書くと、CSSはease（cubic-bezier(0.25, 0.1, 0.25, 1)）を使用します。意図的かどうかに関わらず、Web開発で最も一般的に使用されるイージングです。

カーブの形状

transition-timing-function: ease;
/* 以下と同等: */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

カーブは開始時に素早く加速し、終了に向けて緩やかに減速します。ease-in-outとは異なり非対称で、減速フェーズが加速フェーズよりも長く顕著です。

easeがデフォルトである理由

非対称なプロファイルはUI要素に期待する動作に一致します。ボタンにホバーすると、色の変化は応答性が感じられ（速い開始）、スムーズに落ち着くべきです（遅い終了）。素早い開始は即時性を、緩やかな終了は急激な停止を回避します。

比較表

関数	cubic-bezier	特性
ease	(0.25, 0.1, 0.25, 1)	素早い開始、遅い終了
ease-in-out	(0.42, 0, 0.58, 1)	対称S字カーブ
ease-out	(0, 0, 0.58, 1)	即時開始、遅い終了

コード例

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

ほとんどのホバーエフェクトや小さな状態変更には、デフォルトのeaseがスナップ感とスムーズさを兼ね備えた優れた選択です。