CSS Cubic Bezier（ベジェ曲線）ジェネレーター
2つのハンドルをドラッグしてイージング曲線を設計し、等速運動との違いを視覚的に確認しながら、cubic-bezier()の値をコピーできます。
cubic-bezier(0.25, 0.1, 0.25, 1)曲線の描画処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。
よくある質問
2つのハンドルと4つの数値は何を意味していますか？
曲線は左下（開始点）から右上（終了点）に向かって伸びており、横軸が時間、縦軸が進捗を表します。曲線を曲げる2つのハンドルが制御点であり、それぞれにX座標とY座標があるため、合わせてcubic-bezier(x1, y1, x2, y2)と定義されます。Xは常に0から1の範囲に収まりますが、Yは上端を超えたり下端を下回ったりすることができ、これにより動きが行き過ぎたり（オーバーシュート）、戻ったりする演出が可能になります。
生成された値をCSSでどのように使用すればよいですか？
コピーしたcubic-bezier()の値を、transition-timing-functionやanimation-timing-function、または一括指定（例：transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)）などのイージングを指定する場所に貼り付けます。キーワードであるease、ease-in、ease-out、ease-in-outは固定のcubic-bezier曲線にすぎないため、これらのプリセットを選択するとキーワードの背後にある正確な数値を確認できます。
バウンス（跳ね返り）やエラスティック（伸縮）効果は作れますか？
単一のイージング曲線だけでは完全な表現はできません。1つのcubic-bezierでも、予備動作（アンティシペーション）や行き過ぎ（オーバシュート）は表現可能です（「Back」プリセットはハンドルを枠外にドラッグすることでこれを実現しています）。しかし、それは一方向に動いてから収束する動きに限られます。何度も跳ね返るバウンスや、伸縮を繰り返すエラスティック効果は、単一のcubic-bezierでは表現できません。それらを実現するには、CSSのkeyframes（キーフレーム）や、多数のキーフレームを補間するlinear()関数を使用する必要があります。