CSS 3次ベジェ生成ツール
アニメーションの加速と収束を調整し、トランジションやキーフレーム用の標準 CSS cubic-bezier() 時間関数をコピーします。
時間曲線
横軸：経過時間。縦軸：アニメーション進行度。
ライブ比較
線形
カスタム
使い方
使い方
- イージング設定を選ぶか、x1、y1、x2、y2 を直接入力します。
- 時間曲線を見て、独自の動きと線形アニメーションを比較します。
- CSS のトランジションやアニメーション時間関数として cubic-bezier() 値をコピーします。
経路ではなく時間の曲線
CSS 3次ベジェ値は経過時間に対するアニメーション進行度を表します。横軸は時間、縦軸は進行度で、物体が移動する幾何学的経路を描くツールではありません。同じ例を線形の時間関数と独自の時間関数で動かして比較します。
x 値を制限する理由
CSS は x1 と x2 を0〜1に制限します。時間座標を前へ進め、各時刻の進行度を求められるようにします。このツールもこの範囲を適用します。y1 と y2 は-2〜3で、開始点より下への予備動作や終点を超える動きを表せます。
コピーして使えるブラウザー CSS
コピーする値は小数点以下2桁までの標準 cubic-bezier() 時間関数です。transition-timing-function、animation-timing-function または短縮プロパティに使えます。グラフとアニメーションはブラウザー内で動き、物理運動や全画面で同じ体感速度を保証しません。
よくある質問
あわせて知りたいこと
x1、y1、x2、y2 は何ですか？
3次ベジェ時間曲線の2つの制御点です。曲線は常に0,0から1,1までで、その間の2点を選びます。
y は0未満や1超でもよいですか？
はい。負の y は進む前の一時的な予備動作、1超の y は最終値を超える動きを表せます。このツールは-2〜3を許可します。
x を0〜1以外にできないのはなぜですか？
CSS cubic-bezier 時間関数は両方の x 制御値をこの区間に要求します。範囲外では時間が逆行する場合があり、関数が無効になります。
SVG や移動経路を作りますか？
いいえ。CSS 時間関数だけを作ります。幾何学的経路に沿って動かす場合は CSS motion-path や SVG 経路ツールを使ってください。