コンテンツへスキップ
Cubic Bezier Generator
4つの制御点からCSSのcubic-bezier()イージング関数を生成し、曲線を可視化します。
概要
- 4つの制御点（x1, y1, x2, y2）を指定して、CSSのtransitionやanimationで使うcubic-bezier()イージング関数を生成するツールです。
- 生成した値はグラフとして可視化されるため、曲線の形を見ながら加速・減速の具合を調整できます。
- 生成された値は「cubic-bezier(x1, y1, x2, y2)」の形式で、transition-timing-functionやanimation-timing-functionにそのまま指定できます。
使い方
- x1, y1, x2, y2の各欄に制御点の値を入力します（x1, x2は0〜1の範囲）。
- 「生成する」ボタンをクリックします。
- イージングカーブのグラフと、生成されたcubic-bezier()の値が表示されます。
入力例・出力例
入力
x1: 0.25 / y1: 0.1 / x2: 0.25 / y2: 1
出力
cubic-bezier(0.25, 0.1, 0.25, 1)
利用シーン
- CSSアニメーションやtransitionに、独自のイージング（緩急）を設定する
- 「バウンド」や「オーバーシュート」のような、既定のease系キーワードにない動きを表現する
- デザインカンプで指定されたイージングカーブを、曲線の形を見ながら数値で再現する
よくある質問
y1やy2に1より大きい値や負の値を入力できますか？
はい。y座標は時間ではなく変化の度合いを表すため、範囲制限はありません。1より大きい値や負の値を指定すると、目標値を一度超えてから戻る「オーバーシュート」のような動きになります。
x1やx2に0〜1の範囲外の値を入力するとどうなりますか？
エラーになります。x座標は時間の経過を表すため、0〜1の範囲外を指定すると時間に対して値が単調に増加しなくなり、CSSの仕様上、有効なイージング関数として成立しません。
ease、ease-in、ease-outなどのキーワードに対応する値は何ですか？
easeはcubic-bezier(0.25, 0.1, 0.25, 1.0)、ease-inはcubic-bezier(0.42, 0, 1.0, 1.0)、ease-outはcubic-bezier(0, 0, 0.58, 1.0)、ease-in-outはcubic-bezier(0.42, 0, 0.58, 1.0)に相当します。
注意点
- 生成される値は関数部分（cubic-bezier(...)）のみです。transition-timing-functionやanimation-timing-functionなど、利用したいプロパティに合わせて貼り付けてください。
- グラフは制御点がおおよそ-0.2〜1.2の範囲に収まることを想定した表示です。大きくオーバーシュートする値では、曲線がグラフ枠からはみ出す場合があります。