CSS cubic-bezier ジェネレーター

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

CSS cubic-bezier ジェネレーターは、CSS のトランジションとアニメーションで使うイージング関数を視覚的に編集できる無料ツールで、フロントエンド開発者やモーションデザイナー向けです。cubic-bezier モードでは 2 つの制御点をドラッグ（または入力）して曲線を作ります。x 値は仕様上の 0〜1 に収まり、y 値は 1 を超えたり 0 を下回ったりしてオーバーシュートやアンティシペーションを作れます。steps() モードは段階的なタイミング用で、ステップ数を調整し、jump 項（jump-start・jump-end・jump-none・jump-both、step-start と step-end は steps(1, …)）を選べます。ライブアニメーションのプレビューは、設定した長さで移動・拡大する箱の上に現在のイージングを再生します。任意のプリセットをゴースト曲線として重ねて比較でき、既存の cubic-bezier() や steps() 文字列を読み込めます。正確な宣言をコピーして transition-timing-function や animation-timing-function に使えます。

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

1. 上部で cubic-bezier() か steps() モードを選ぶか、設定を開いて ease・ease-in-out・linear などのプリセットを起点にします。
2. cubic-bezier モードでは、グラフ上の 2 つのハンドルをドラッグするか、x1・y1・x2・y2 の正確な値を入力します。オーバーシュートには y を 1 より大きくします。
3. steps() モードでは、ステップ数を設定し、jump 項（jump-start・jump-end・jump-none・jump-both）を選んで階段を描きます。
4. 再生を押すと移動・拡大する箱でライブアニメーションが走ります。秒単位の長さを調整してタイミングを体感します。
5. 設定で比較曲線を選ぶと、プリセットがゴーストとして同じグラフに重なります。または値をインポートに貼り付けて適用します。
6. 生成された cubic-bezier() または steps() の値をコピーして、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.34, y1 1.56, x2 0.64, y2 1

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

steps モード, N 4, jump-end

steps(4, jump-end)

よくある質問

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

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

steps() モードは何のためのものですか？

steps() はなめらかに補間する代わりに、決まった数の値の間を飛び移ります——スプライトアニメーションやカウントアップ、コマ送り効果に便利です。ステップ数と jump 項（jump-start・jump-end・jump-none・jump-both）を設定します。step-start は steps(1, jump-start)、step-end は steps(1, jump-end) と同じです。

ライブアニメーションのプレビューはどう動きますか？

再生を押すと、箱が現在のイージングでトラックを移動し拡大しながら、行き来を繰り返します。秒単位の長さを変えて遅く・速くできます。純粋な CSS アニメーションを使い、あなたの cubic-bezier() または steps() 値をタイミング関数にします。

既存のイージング値を読み込めますか？

はい。cubic-bezier(...) や steps(...) の値、あるいは ease-in-out・step-start・step-end などのキーワードをインポート欄に貼り付けて適用します。エディターがそれを制御点やステップ設定に解析して戻します。

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

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