CSS キュービックベジェ ジェネレーター

このツールとは？

cubic-bezier() は、トランジションやアニメーションの値が一定速度ではなく時間とともにどう加速・減速するかを制御するCSSのタイミング関数です。固定された開始点 (0,0) と終了点 (1,1) の間を曲げる2つの制御点 (x1, y1) と (x2, y2) で定義されます。x値は0〜1の範囲に収める必要がありますが、y値はその範囲を超えることができ、オーバーシュートやバウンス効果を作れます。

手書きで4つの小数を調整して、硬すぎず緩すぎない動きを見つけるには多くの試行錯誤が必要です。このツールはその手探りを直接操作に置き換えます。スライダーを動かすと曲線が曲がり、プレビューのボールがそれに応じて動くのを確認しながら、動きがしっくりきたところでCSSをコピーできます。

出典: CSS Easing Functions Level 1, W3C — cubic-bezier() と、このツールのプリセットの基になっている5つの名前付きキーワードを定義する仕様です。

なぜこれを使うのか？

• ライブのSVDグラフが、固定された開始点と終了点の間で曲線がどう曲がるかを、2つの制御点とそのハンドルとともにはっきり表示します。
• 再生ボタンで、生成した曲線を使ってプレビュー要素がトラック上を実際に動く様子を確認でき、静的なグラフだけでなく動きそのものを体感できます。
• CSS Easing Functions仕様で定義された標準の名前付きイージング関数（ease、ease-in、ease-out、ease-in-out、linear）をワンクリックで適用できるプリセット。
• y値は0未満や1超に設定でき、名前付きキーワードでは作れないオーバーシュート/バウンス系のイージングを作成可能。
• そのまま貼り付けられるtransition-timing-functionのCSSを生成——同じ値はanimation-timing-functionにも使えます。
• すべてブラウザ内で完結し、設定した内容はどこにもアップロードされません。無料・登録不要。

使い方

1. x1/y1スライダーを動かして、アニメーションの始まり方を決める最初の制御点を設定します。
2. x2/y2スライダーを動かして、アニメーションの終わり方を決める2つ目の制御点を設定します。
3. グラフの黒い曲線を確認します——序盤に対角線より上に膨らんでいれば動きは速く始まり、下にとどまっていれば遅く始まります。
4. 「再生」をクリックすると、生成した曲線をtransition-timing-functionとしてプレビュー要素がトラックを移動します。
5. まずはプリセット（ease、ease-in、ease-out、ease-in-out、linear）を出発点として試し、そこからスライダーを微調整します。
6. 生成されたCSSをコピーして、transitionやanimationのルールに貼り付けます。

例

入力

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

出力

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

これは標準のCSSキーワードeaseを明示的な制御点として書き出したものです——素早く動き出し、終盤に向けて徐々に減速します。

y値が0〜1を超えられる理由

時間を表し必ず0から1まで進むx軸と異なり、y軸はアニメーションされる値の進行度を表すため、この制限がありません。y1を0未満、y2を1超に設定すると、曲線は開始値より前に沈んだり、終了値を超えて落ち着いたりします——これがボタンの押下フィードバック、モーダルのポップイン、遊び心のあるマイクロインタラクションで使われるオーバーシュートや予備動作の原理です。ease、ease-in、ease-out、ease-in-out、linearという5つの名前付きキーワードはこれを作れず、独自のcubic-bezier()が必要です。

transition-timing-functionとanimation-timing-functionの違い

このツールが生成するcubic-bezier()の値は、両方のプロパティで全く同じように機能します。hoverやクラスの切り替えなど状態変化によって動きがトリガーされる場合はtransition-timing-functionを、自動再生やループが必要な@keyframesベースのアニメーションルール内ではanimation-timing-functionを使います。

よくあるイージングパターン

• キビキビしたUIフィードバック（ボタン、トグル）：制御点を対角線に近づけ、わずかにease-out寄りにする。例: cubic-bezier(0.4, 0, 0.2, 1)。
• Material Designの標準曲線: cubic-bezier(0.4, 0, 0.2, 1) ——素早く始まり穏やかに終わる、パネルやカードの遷移によく使われる。
• バウンス/オーバーシュート：y2を1超に設定する。例: cubic-bezier(0.34, 1.56, 0.64, 1)、遊び心のあるポップイン感を演出。
• 動く前の予備動作：y1を0未満に設定し、要素が前進する前に少し後ろに引くようにする。
• ループアニメーション向けの滑らかなease-in-out：曲線を中心に対してほぼ対称に保つ。

他のCSSツールとの組み合わせ

イージング曲線が単体で使われることは稀で、通常は影や角丸、グラデーションも必要な要素に適用されます。下にある他のCSSツールで見た目のスタイルを生成し、このツールで作ったタイミング関数を同じルールやtransition/animation宣言に追加してください。

→ Box Shadow ジェネレーター · Border Radius ジェネレーター

よくある質問