CSS cubic-bezier ジェネレーター

CSS cubic-bezier ジェネレーターとは？

CSS cubic-bezier ジェネレーターは、CSS のトランジションとアニメーションで使う cubic-bezier() タイミング関数を視覚的に編集できる無料ツールで、フロントエンド開発者やモーションデザイナー向けです。ease・linear・ease-in・ease-out・ease-in-out といったプリセットを選ぶか、2 つの制御点を自分で微調整できます。x 値は仕様上の 0〜1 にクランプされ、y 値は 1 を超えたり 0 を下回ったりしてオーバーシュート（行き過ぎ）やアンティシペーション（予備動作）を作れます。プレビューは単位正方形上に曲線を描くので加速・減速が一目でわかり、正確な cubic-bezier(x1, y1, x2, y2) 宣言が生成されてコピーできます。組み込みのキーワードが平凡に感じ、もっとキビキビした・弾むような・落ち着いた動きが欲しいときに使えます。

CSS cubic-bezier ジェネレーターの使い方

1. 設定を開き、起点となるプリセット（ease・linear・ease-in・ease-out・ease-in-out）を選んで制御点を初期化します。
2. 曲線プレビュー上の 2 つの丸いハンドルをドラッグしてイージングを作り直すか、x1・y1・x2・y2 の各欄に正確な値を入力します。
3. x1 と x2 は 0〜1 の範囲に保ち、y1 や y2 を 1 より大きく、または 0 より小さくして、動きにオーバーシュートやアンティシペーションを加えます。
4. 破線の linear 基準線と見比べて、イージングがどう加速・減速するかを確認します。
5. 生成された cubic-bezier() の値をコピーして、transition-timing-function や animation-timing-function に貼り付けます。

使用例

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

よくある質問

cubic-bezier の 4 つの数字は何を意味しますか？

2 つの制御点の座標です。最初の点が x1・y1、2 つ目の点が x2・y2 です。曲線は必ず (0,0) から始まり (1,1) で終わり、制御点がその間を曲げます。これにより、アニメーションするプロパティが時間とともにどう加速・減速するかが決まります。

なぜ x1 や x2 を 1 より大きくできないのですか？

CSS 仕様では、両方の制御点の x（時間）座標を 0〜1 の範囲に収める必要があります。これによりタイミング関数が進行度から出力への有効な対応であり続けます。本ツールは x の欄とドラッグハンドルを自動でこの範囲にクランプします。一方 y 値は、オーバーシュートやアンティシペーションのために 1 を超えたり 0 を下回ったりできます。

弾むような・バネのようなイージングはどう作りますか？

いずれかの y 値を 1 より大きく（終盤でオーバーシュート）、または 0 より小さく（序盤でアンティシペーション）します。たとえば cubic-bezier(0.34, 1.56, 0.64, 1) は落ち着く前に行き過ぎ、JavaScript なしでバネのような感触になります。

生成した値はどこで使いますか？

transition-timing-function または animation-timing-function の値として貼り付けます——たとえば transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) のように。ease や ease-in-out といったキーワードを、あなたのカスタム曲線で置き換えます。

データはサーバーに送信されますか？

いいえ。エディター全体が JavaScript でブラウザ内で動作します——制御点も曲線もローカルで計算され、送信されることはないため、プライバシーが保たれ、ページ読み込み後はオフラインでも使えます。