CSSイージングジェネレーター
2つのハンドルをドラッグしてカスタムのイージング曲線を作り、ボールのプレビューでライブ確認しながら、
cubic-bezier()の値をコピーできます。
プリセット
仕組み
グラフは1秒間にわたって進行度（縦軸）を時間（横軸）に対してプロットしています。両方のハンドルは
直接ドラッグでき、下の数値フィールドはどちらの方法で変更してもハンドルと同期します。マウスや指で
ドラッグしてもよいですし、特定の曲線に合わせたい場合は正確な値を入力してもかまいません。同じ4つの
数値が、表示されているSVGパスと、プレビューのボールに適用される実際の
transition-timing-functionの両方に使われるため、見えているものは近似ではなく
実際のイージングそのものです。
すべてブラウザ自身のCSSトランジションエンジンで動作します。アニメーションの状態や曲線データが どこかに送信されることはありません。
よくある質問
2つのハンドルは何を制御していますか?
cubic-bezierのイージング曲線は2つの制御点で定義され、それぞれがx（時間、0～1）とy（進行度、範囲は無制限ですが通常は0～1）の座標を持ちます。ハンドルをドラッグするとその点を直接設定でき、表示される4つの数値がそのままcubic-bezier()の中身になります。
曲線が100%を超えてオーバーシュートすることはありますか?
はい。制御点のy値が1を超えたり0を下回ったりすると、アニメーションは落ち着く前に一瞬終了値を超えたり開始値を下回ったりします。いわゆる「バウンス」や「予備動作」の効果です。ハンドルをグラフの上下にドラッグして試してみてください。
これはどこかに送信されますか?
いいえ。曲線とプレビューアニメーションはすべてブラウザのCSSエンジン内で動作します。アップロードは一切行われません。