CSS3 ベジェ曲線ツール

機能

• 座標平面上で2つの制御点を直接ドラッグ。曲線と数値が同期します
• 横軸が時間、縦軸が進行度 —— 曲線が急なほど動きが速くなります
• 縦軸は範囲外も可（ドラッグの余量 ±0.5）。弾む動きはこうして作ります
• よく使うプリセット7種。それぞれ「どこで使うか」を書いてあります
• 曲線がキーワード（ease / linear / ease-out など）と等価ならそれを指摘します
• 再生できるプレビュー付き。座標を見て想像するより手触りで判断できます
• キーボード操作対応：ハンドルにフォーカスして方向キー、Shift で加速、Alt で微調整
• コピーされるのは完全な断片：transition と animation の両方の書き方を含みます

使い方

1. 2つのハンドルをドラッグするか、まずプリセットを読み込みます
2. 「再生」を押して四角の動きを確認 —— 座標より手触りが分かりやすいです
3. 4つの入力欄に直接数値を入れても構いません
4. 下の CSS をコピーして自分のスタイルに貼ります

よくある質問

4つの数値は何を表しますか？

2つの制御点の座標です：`cubic-bezier(x1, y1, x2, y2)`。曲線は常に (0,0) から (1,1) へ進み、この2点がそれを引っ張る —— だから編集画面のハンドルは4つではなく2つなのです。横軸の 0〜1 は時間（開始から終了）、縦軸の 0〜1 は進行度（始点から終点）です。

y が 0–1 を超えてもよいのはなぜですか？

仕様が y に制限を設けていないからです。そして範囲外に出ることが弾む動きの正体です：y が 1 より大きいのは「終点を通り過ぎてから戻る」、y が 0 より小さいのは「ゴムのように一旦逆へ引いてから進む」—— プリセットの「入場時にひと押し」「大きな行き過ぎ」はこうして作られています。一方 x は 0〜1 に収まる必要があります —— 外れると `transition` の宣言全体が無効になります（無視されるのではなく、その宣言が一切適用されません）。そのためドラッグ中の x は丸めています。

調整した曲線にはどのくらいの時間を組み合わせますか？

時間と曲線は一緒に調整します。同じ曲線でも 200ms と 800ms では印象がまったく違うからです —— プレビューで時間を変えられると理想的な所以です（このツールは曲線の形を見やすくするため 900ms に固定しています）。目安：ホバーの反応は 150〜250ms、要素の移動は 300〜500ms、元気さが欲しい入場アニメーションは 400〜700ms。曲線が誇張されているほど短い時間は避けてください —— 120ms に圧縮された行き過ぎは、動きではなくちらつきに見えます。

イージング曲線は性能に影響しますか？

直接的には関係ありません —— 性能を決めるのはどのプロパティを動かすか（`transform` と `opacity` は合成層で処理でき、`width`・`top`・`box-shadow` は再レイアウトや再描画を起こします）で、曲線ではありません。曲線は見え方だけを変えます。ひとつ知っておくとよい例外：cubic-bezier の計算はブラウザにとって安価ですが、`steps()` や物理ベースの JS アニメーションは長いリストでは負荷になり得ます。