CSS キュービックベジェ エディター
制御点をドラッグするか数値を入力し、アニメーションを再生してから cubic-bezier() の CSS 宣言をコピーできます。
ブラウザ内でローカルに実行 · cubic-bezier() · CSS タイミング
制御点をドラッグするか数値を入力し、アニメーションを再生してから cubic-bezier() の CSS 宣言をコピーできます。
ブラウザ内でローカルに実行4 つの制御点（x1・y1・x2・y2）から cubic-bezier() を作り、そのイージングカーブを描画して、同じ関数で実際の CSS トランジションを再生します。カーブ・コード・プレビューはすべてページ内で組み立てられ、値のアップロードは行いません。
x1 と x2 は CSS の文法どおり 0〜1 に収まり、y1 と y2 は −2〜2 を受け付けるため、行き過ぎ（オーバーシュート）のあるカーブも作れます。キャンバスは既定で −0.5〜1.5 の範囲を表示し、制御点がそれを超えると範囲を広げて、点が画面外に切れないようにします。
出力は 1 つのルール — .animated-element { transition: transform <継続時間>ms cubic-bezier(x1, y1, x2, y2); } — です。セレクターと対象プロパティは置き換えて使う例で、このツールが受け持つのはタイミング関数の部分です。4 つの数値はコード欄と同じく小数第 2 位へ丸めて出力されます。
コード欄・再生する点に適用される関数・カーブの描画は、すべて同じ 4 つの入力欄を読み取るため、プレビューとコピーした宣言が食い違うことはありません。
横軸が 0〜1 の x、縦軸がタイミングの範囲です。縦のグリッド線は x の 1/4 ごと、横の線は表示範囲内で y の 0.5 ごとに引きます。2 つの制御点は座標どおりに描かれ、カーブは (0,0)・2 つのハンドル・(1,1) を通る三次曲線です。
縦の表示範囲は既定で −0.5〜1.5 です。制御点がそれを外れる場合（overshoot プリセットの y1 は 1.56、入力欄は 2 まで対応）は、範囲を必要な分だけ広げて、点とカーブの一部が見切れないようにします。
x の値は 0〜1、y の値は −2〜2、継続時間は 100〜5000 ms にクランプし、数値は小数第 2 位へ丸めます。手入力やドラッグで値が変わると、プリセット欄は「カスタム」に切り替わり、入力内容と食い違うプリセット名が残りません。
アップロードはありません。ページ読み込み後にプリセットの選択・ドラッグ・入力・再生・コピー・リセットを行った en / fr / ja の検証で、ネットワークリクエストは 1 件も発生しませんでした。プレビューはブラウザー自身の CSS トランジション実装を使うため、オフラインでも動作します。