CSSにおけるタイミング関数とベジェ曲線の仕組み
CSSのトランジションやアニメーションにおいて、変化の速度や進行度合いを制御するのがタイミング関数です。このタイミング関数を定義する代表的な方法が、3次ベジェ曲線を用いた cubic-bezier(x1, y1, x2, y2) 関数です。
ベジェ曲線は、開始点（左下）から終了点（右上）に向かって描かれます。この曲線の形状を決定するのが、2つの制御点（第1制御点、第2制御点）です。
- 横軸（X軸）: 時間の経過を表します。値の範囲は
0から1の間に制限されます。 - 縦軸（Y軸）: アニメーションの進捗度合いを表します。値の範囲は
-0.70から1.70まで設定可能です。
制御点の座標（x1, y1, x2, y2）を調整することで、加速や減速のタイミングを自由に設計できます。
ジェネレーターの入力と操作方法
本ツールでは、視覚的なドラッグ操作と数値入力を組み合わせて直感的にイージング曲線を設計できます。
1. ハンドルのドラッグ操作
画面上の2つのハンドルをドラッグすることで、曲線の形状をリアルタイムに変更できます。
- 第1制御点 のハンドルを動かすと、アニメーション初期の加速具合が変化します。
- 第2制御点 のハンドルを動かすと、アニメーション後半の減速具合が変化します。
2. 数値による精密調整
「第1制御点」および「第2制御点」のX座標とY座標を直接数値で入力できます。
- X値の制限:
0から1の範囲内。 - Y値の制限:
-0.70から1.70の範囲内。
入力時のルールと挙動
- 範囲外の入力: 「第1制御点」のX値に
9などの範囲外の数値を入力してフォーカスを外すと、自動的に上限値である1に補正されます。 - 空欄時の挙動: 数値入力フィールドを空にしてフォーカスを外すと、直前の有効な数値が自動的に復元されます。
- キーボード操作: 制御点のハンドルにフォーカスが当たっている状態でキーボードの左矢印キー（Left）を押すと、値を
0.99のように微調整できます。 - 未完成の入力: 空欄や数値以外の文字が入力されている間は、完全な数値が入力されるまで処理を待機します。
3. プリセットの選択
「プリセット」から定義済みのイージングを選択できます。
easeease-inease-outease-in-outBack InBack Out（cubic-bezier(0.34, 1.56, 0.64, 1)を適用）Back In-Out
出力とプレビュー機能
調整された曲線データは、以下の形式でリアルタイムに出力・可視化されます。
- 作成中の曲線: 設計したイージング曲線の形状がグラフ上に描画されます。
- アニメーションプレビュー: 画面上では、設計した曲線に沿って動くドット（作成中の曲線）と、一定の速度で動くドット（等速運動）が並んで移動します。これにより、イージングの効果を視覚的に比較確認できます。
- cubic-bezier(x1, y1, x2, y2): 決定された座標値がCSSコードとして出力されます。この値をクリックしてコピーすると、成功時にステータスが表示されます。コピー処理において、失敗や拒否を促す特別なプロンプトは表示されません。
オーバーシュートとプルバック効果
Y値の範囲が -0.70 から 1.70 まで許容されているため、グラフの上下の枠線を超える設定が可能です。
- プルバック（予備動作）: Y値をマイナス（
0未満）に設定すると、アニメーション開始時に一度逆方向に引き込んでから目的地へ向かう動きを作ることができます。 - オーバーシュート（行き過ぎ）: Y値を
1より大きく設定すると、目的地を一度通り過ぎてから戻ってきて静止する動きを作ることができます。
技術的な制限事項
単一の cubic-bezier() 関数には、数学的な表現の限界があります。
- 一方向の制御: 曲線は開始から終了まで一方向にしか進めません。
- 複雑な動きの不可: 予備動作や一度の行き過ぎは表現できますが、何度もバウンドするような「跳ね返り（バウンス）」や、ゴムのように何度も往復する「伸縮（エラスティック）」といった、進行方向が複数回反転する動きを1つの
cubic-bezier()で表現することはできません。
プライバシーとデータ処理について
曲線の描画処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。
よくある質問（FAQ）
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()関数を使用する必要があります。