Cubic Bezier Generator

概要

• 4つの制御点（x1, y1, x2, y2）を指定して、CSSのtransitionやanimationで使うcubic-bezier()イージング関数を生成するツールです。

• 生成した値はグラフとして可視化されるため、曲線の形を見ながら加速・減速の具合を調整できます。

• 生成された値は「cubic-bezier(x1, y1, x2, y2)」の形式で、transition-timing-functionやanimation-timing-functionにそのまま指定できます。

使い方

1. 1

   x1, y1, x2, y2の各欄に制御点の値を入力します（x1, x2は0〜1の範囲）。

2. 2

   「生成する」ボタンをクリックします。

3. 3

   イージングカーブのグラフと、生成された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系キーワードにない動きを表現する

• デザインカンプで指定されたイージングカーブを、曲線の形を見ながら数値で再現する

よくある質問

注意点

• 生成される値は関数部分（cubic-bezier(...)）のみです。transition-timing-functionやanimation-timing-functionなど、利用したいプロパティに合わせて貼り付けてください。

• グラフは制御点がおおよそ-0.2〜1.2の範囲に収まることを想定した表示です。大きくオーバーシュートする値では、曲線がグラフ枠からはみ出す場合があります。