CSS Cubic Bezierエディタ
CSSのtransition·animationで使うcubic-bezier()イージング関数をビジュアルで編集します。制御点をドラッグし、リアルタイムアニメで結果を確認しましょう。
プレビュー
使い方
2つの制御点(青い点)をドラッグするか、入力欄に座標を直接入力。曲線が即座に反映されます。yは「overshoot」表現のため[-0.5, 1.5]まで許容。
プレビュー領域の「再生」ボタンを押すたびに、現在のイージングでボールが動きます。曲線の起伏が大きいほど、加速·減速·跳ね返りがはっきりします。
下部のCSSコード(transition-timing-function: cubic-bezier(…))をワンクリックでコピーしてプロジェクトへ。プリセットボタンで標準イージングも即時呼び出し可能。
よくある質問
cubic-bezier(0.25, 0.1, 0.25, 1)の意味は？
CSSの標準イージング関数です。4つの数値は2つの制御点のx·y座標(P1=(0.25, 0.1)、P2=(0.25, 1))を表します。P0=(0,0)·P3=(1,1)は固定。これら4点が形成するベジエ曲線が「時間→進捗度」のマッピングになります。
yが1超や負の値もOK？
はい。yは無制限です。y > 1 は overshoot(目標を一度超えてから戻る、弾性効果)、y < 0 は backtrack(逆方向に行ってから進行)。CSSはどちらもサポート。xは[0, 1]範囲必須。
CSSの「ease」「ease-in-out」などの値は？
`ease` = cubic-bezier(0.25, 0.1, 0.25, 1.0)、`ease-in` = (0.42, 0, 1.0, 1.0)、`ease-out` = (0, 0, 0.58, 1.0)、`ease-in-out` = (0.42, 0, 0.58, 1.0)、`linear` = (0, 0, 1, 1)。本ツールのプリセットボタンで即時呼び出し可能。
transition·animationのどこで使う？
CSSの`transition-timing-function: cubic-bezier(...)`または`animation-timing-function: cubic-bezier(...)`に使用。短いインタラクション(transition)とキーフレームアニメ(animation)の両方で時間の流れを制御します。
サーバーに送信されますか？
いいえ。すべての曲線計算とプレビューはブラウザ内で行われ、入力値が外部に送信されることはありません。
