cubic-bezier()とは？
cubic-bezier(x1, y1, x2, y2)は、CSSアニメーションやtransitionの進行を変換するイージング関数です。始点P0=(0,0)と終点P3=(1,1)は固定され、P1とP2が曲線の形を決めます。仕様はCSS Easing Functions Module Level 2を基準にしています。
X座標とY座標の違い
x1とx2は0〜1の範囲でなければCSSとして無効です。一方、y1とy2は負数や1を超える数も有効です。グラフのXはinput progress、Yはoutput progressを表します。
グラフと実際のCSS preview
グラフは通常の三次Bézier曲線として描画します。previewはJavaScriptで動きを疑似計算せず、生成したcubic-bezier()を実際のtransition-timing-functionへ設定します。ページ読み込み時の自動再生や無限再生は行いません。
よくある質問
cubic-bezier()とは？
CSSのイージング関数で、2つの制御点を使って入力進行度から出力進行度への曲線を指定します。
4つの数字は何ですか？
P1(x1,y1)とP2(x2,y2)という2つの制御点です。始点P0は(0,0)、終点P3は(1,1)に固定されます。
XとYは0〜1だけですか？
x1とx2は0〜1必須です。y1とy2はCSS仕様上その範囲に限定されず、負数や1を超える数も指定できます。
easeの値は？
cubic-bezier(0.25, 0.1, 0.25, 1)です。
ease-in・ease-out・ease-in-outの値は？
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)です。
Yを1以上にするとどうなりますか？
出力進行度が通常範囲を超える曲線を作れますが、最終的な見え方は適用するCSSプロパティにも依存します。
入力内容は送信されますか？
送信されません。計算・描画・previewはブラウザ内で行い、Cookie・ブラウザストレージ・URLへ入力値を保存しません。