CSS Cubic-Bezier カーブジェネレーター

使い方

1. 青と赤のハンドルをドラッグして曲線を整形。
2. またはプリセット（ease・ease-in-out・overshoot…）を選択。
3. 再生で指定時間の動きを体感、CSS をコピー。

よくある質問

Y が 1 超 / 0 未満で良い理由は？

オーバーシュート（バウンス）・アンティシペーション（予備動作）効果は Y が [0, 1] 外で必要。CSS は許可 — 値が一時的に目標を超えてから定まる。

X は？

CSS は X1・X2 を [0, 1] に制限し、曲線が時刻の関数になるよう要求。スライダーは X をクランプ、Y は 1 超 / 0 未満を許容してオーバーシュート対応。

スプリング物理との違い？

Cubic-bezier は固定時間上の決定的曲線。スプリング（`linear(...)` や JS）は実物理モデル — モデルは違うが単純ケースでは似た体感。

CSS のどこで使う？

`transition-timing-function: cubic-bezier(...)` または `animation-timing-function:`。Tailwind: `ease-[cubic-bezier(...)]`。

関連ツール