CSS ease-in-outイージング関数

ease-in-outを理解する

ease-in-outキーワードは、CSSで事前定義された5つのタイミング関数の1つです。cubic-bezier(0.42, 0, 0.58, 1)にマッピングされ、対称的なS字型カーブを生成します。

カーブ

transition-timing-function: ease-in-out;
/* 以下と同等: */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

アニメーションはゆっくり始まり（カーブの開始部分がほぼ平坦）、中間点で加速し、最後に減速します。これは物理的な世界のオブジェクトの動きを反映しています。

ease-in-outを選ぶタイミング

ユースケース	適している理由
要素のフェードイン/アウト	緩やかな開始と終了が洗練された印象を与える
スライドパネル	対称的な加速がバランスよく見える
状態変更（トグルスイッチなど）	2つの状態間の自然な動き

easeとの比較

デフォルトのease関数（cubic-bezier(0.25, 0.1, 0.25, 1)）は非対称で、加速よりも減速が大きくなります。ease-in-outは50%マーク周辺で完全に対称的であり、開始と終了の両方が同じ重みに感じられるようにしたい場合に最適です。

コード例

.panel {
  transition: transform 400ms ease-in-out;
}
.panel.open {
  transform: translateX(0);
}
.panel.closed {
  transform: translateX(-100%);
}

ease-in-outはCSSキーワードなので、Web Animations APIにも直接渡すことができます：

element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 400, easing: 'ease-in-out' }
);