Cubic Bezier Editor

使い方

1. ピンクのハンドルで 1 つ目の制御点、琥珀色のハンドルで 2 つ目の制御点を動かします。
2. キャンバスには単位正方形、生成されたカーブ、角から制御点への補助線が描かれます。
3. x1、y1、x2、y2 を数値入力で微調整します。x1 と x2 は 0〜1 に保ってください。範囲外は CSS に拒否されます。
4. Play で 6 本のトラックを同時に動かします。1 本目が自分のカーブ、下の 5 本が CSS キーワードです。
5. 生成された CSS をコピーします。キーワードと完全に一致する場合は、その旨がスニペットに追記されます。

よくある用途

• オーバーシュートを作る —— y1 を 1 より上に、または y2 を 0 より下に動かすと、要素が目標を少し通り過ぎてから落ち着きます。
• デザインデータのモーションを再現する —— デザイナーから受け取った 4 つの数値を入力し、コードを書く前にカーブを確認します。
• キーワードと比較する —— 6 本を同時に動かせば、自分のカーブが ease-out とどれだけ違うかが一目で分かります。
• 鈍いトランジションを調査する —— 大半が対角線に沿うカーブは遅く感じられます。キャンバスを見ればすぐ分かります。
• タイミングトークンを整備する —— ここで 2〜3 本のカーブを決め、同じ値をデザイントークンに貼り付けます。

よくある質問

Q: x1 と x2 は 0〜1 に固定され、y は固定されないのはなぜですか？ A: CSS の仕様で cubic-bezier の x 座標は 0〜1 の範囲に置く必要があり、外れると宣言が無効になります。y 座標は範囲外でもよく、オーバーシュートやアンダーシュートはこれで作ります。

Q: プレビューはブラウザーの実際の動作と同じですか？ A: 同じカーブ定義を使い、cubic-bezier の x を解いて y を読んでいます。ブラウザーも同じ計算をするので、形とタイミングは一致します。

Q: この値は keyframes でも使えますか？ A: はい。生成されるスニペットには transition 形式と animation 形式の両方が含まれ、4 つの数値はどちらでも使えます。