使い方
- グラフ上の制御点1か制御点2をドラッグします。点をクリックして矢印キーを使うと小さく動き、Shiftを押したままにすると大きく動きます。
- 正確な曲線が必要な場合は、x1（0から1）、y1、x2（0から1）、y2に値を正確に入力します。xの値は0から1の間に保ちます。
- ease-in-outなどのプリセットを押すか、アニメーションのプレビューの下の再生を押して、ボールが曲線に従う様子を見ます。
- CSSの宣言をコピーして、トランジションやアニメーションで使います。
4つの数字の意味
三次のベジェ曲線のイージングは、(0, 0)で始まり(1, 1)で終わります。2つの制御点、(x1, y1)と(x2, y2)が形を決めます。横軸は経過した時間の割合で、縦軸は行われた変化の割合です。CSSイージング関数の仕様（英語）は、時間が逆行したり終わりを超えたりできないので、制御点のxの値を0から1の範囲に制限しています。
yの値にはそのような制限がありません。1より大きいか0より小さいyの値は、曲線をオーバーシュートさせるので、変化が終わりを超えて戻ったり、逆方向に動き始めたりします。
cubic-bezier(x1, y1, x2, y2), where x1 and x2 are between 0 and 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)で、仕様がこの値を示しています。linear（直線）は、cubic-bezier(0, 0, 1, 1)でも描かれる直線です。
ボールはアニメーションのタイミングとして曲線をたどるので、イージングを動きとして見られます。端末が動きの軽減を求めている場合、アニメーションは一時停止の状態で始まり、再生で動き出します。
- ページに現れる要素にはease-outのような穏やかな曲線を、ページから去る要素にはease-inを使います。
- トランジションは短くして、イージングを待つのではなく感じられるようにします。
計算例：時間の半分での進み具合
ease-in-outの曲線 cubic-bezier(0.42, 0, 0.58, 1) は中心に対して対称なので、時間の半分では変化の半分をちょうど進めています。表示は0.5000です。
easeの曲線 cubic-bezier(0.25, 0.1, 0.25, 1) は、同じ点でさらに先に進んでいます。時間の半分では変化の0.8024を進めているので、初めに速く動き、終わりに向かって遅くなります。
よくある質問
ボールは何を示していますか？
ボールはトラックの左端から右端まで動き、その位置は曲線に従います。横の位置は、これまでに行われた変化の割合です。曲線が1を超えると、ボールはトラックの端を越え、そこで切り取られます。
xの値が0と1の範囲を超えられないのはなぜですか？
横軸は時間で、曲線は開始から終了までの時間を表します。開始より前や終了より後の時間は曲線上に場所がないので、仕様は制御点のxの値を0から1の間に保ちます。yの値にはそのような制限はありません。
ease-inとease-outの違いは何ですか？
ease-inはゆっくり始まって終わりに向かって速くなり、ease-outは速く始まって終わりに向かって遅くなります。2つの曲線は互いに鏡像なので、同じ変化を逆向きに読んだものになります。
値をトランジションだけでなくアニメーションでも使えますか？
はい。同じcubic-bezier()の値は、transition-timing-functionだけでなくanimation-timing-functionにも使えるので、宣言はどちらでも使えます。
ドラッグしたり入力したりした内容は保存されたり、サーバーに送られたりしますか？
いいえ。曲線とアニメーションはブラウザの中で作られます。何も保存もサーバーへの送信もされないので、ページを離れる前に宣言をコピーしてください。
出典
- W3C（英語）：CSS Easing Functions Level 1, cubic Bézier easing functions
- MDN（英語）：transition-timing-function
数値と文章の最終確認日：2026年11月10日火曜日。