CSSトランジション用カスタムcubic-bezierイージングカーブ

cubic-bezierイージングの理解

cubic-bezier()関数は、4つの制御点を使用してCSSトランジションのカスタムイージングカーブを定義できます。アニメーションの加速・減速の仕方を完全にコントロールできます。

構文

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

4つの値はcubic Bezierカーブの2つの制御点を定義します：

• (x1, y1) — 第1制御点
• (x2, y2) — 第2制御点
• x値は0〜1の間でなければならない
• y値はオーバーシュート/バウンス効果のために0〜1の範囲外にできる

プリセットの等価値

キーワード	cubic-bezier
linear	cubic-bezier(0, 0, 1, 1)
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)

人気のカスタムカーブ

オーバーシュート（バウンス出口）:

transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

y2値の1.56により、要素がターゲットを通り越してスナップバックします。

スムーズな減速:

transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

ページトランジションやモーダル入場に人気のカーブ — 速い開始、非常に穏やかな停止。

スプリング風:

transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

負のy1が最初に引き戻し、次にオーバーシュートして落ち着く — スプリングをシミュレートします。