3次ベジェ曲線ジェネレーター
2つの制御点をドラッグしてカスタムCSS cubic-bezier()タイミング関数をデザインし、リニアと比較しながらライブプレビューし、完成した値をコピーします。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
手動でcubic-bezier(x1, y1, x2, y2)を入力し、ページをリロードして感触を確認するのは、アニメーション調整の遅い方法です。このジェネレーターはそのループを閉じます：曲線上のどちらかの制御点ハンドルをドラッグするか、x1/y1/x2/y2フィールドに正確な数値を入力すると、曲線、コピー可能なCSS文字列、ライブアニメーションプレビューが変更のたびにすべて更新されます。ビルドステップもリロードも不要です。
2つの軸は意図的に異なる動作をします。x1とx2は0から1の間に制限されます。これはCSS仕様がcubic-bezier()タイミング関数に実際に要求していることで、その範囲外の値は単に無効となるからです。y1とy2にはそのような制限はありません。ハンドルをボックスの上部より上または下部より下にドラッグすると、曲線は開始前または終了後を超えてオーバーシュートします。これこそが、スプリングやバウンススタイルの効果が単一のイージング曲線から構築される仕組みです。
数値を見ることと動きを見ることは同じではありません。そのため、プレビューでは2つの同一のボールがループで並んで動作します。一方はカスタム曲線で動き、もう一方は単純な等速（リニア）ペースで動きます。それらを競わせることは、イージング曲線が実際に望む感触を生み出すかどうかを、スタイルシートに適用する前に判断する最も速い方法です。プリセットページ（CSS自身のease-in-outキーワードの背後にある実際の数値、一部でバウンスと呼ばれるオーバーシュート近似の正直な説明、Googleが公開しているMaterial Design標準曲線）は、空白の制御点からではなく、ドラッグを開始できる出発点です。
すべてはお使いのブラウザ内でローカルに実行されます。アップロード、アカウント、サーバーとのやり取りはなく、ページが読み込まれればオフラインでも動作し続けます。