📈 開発者ツール

cubic-bezierイージング作成

制御点をドラッグするか、x1, y1, x2, y2 の数値を入れるだけで、CSSの cubic-bezier() イージングを視覚的に組み立てます。プリセットとライブプレビュー付き。生成された transition-timing-function をそのままコピーできます。すべてブラウザ内で動くので、入力内容は外に出ません。

プリセット（クリックで適用）

x1・x2 は 0〜1 に自動で収まります。y1・y2 は自由（目安 -0.5〜1.5、範囲外はオーバーシュート表現）。

関数 cubic-bezier(.25,.1,.25,1)
CSS transition-timing-function: cubic-bezier(.25,.1,.25,1);

cubic-bezierイージング作成の使い方

グラフ上の2つの制御点をドラッグするか、x1 / y1 / x2 / y2 の数値を入力すると、曲線・プレビュー・出力コードがその場で更新されます。まずは上のプリセットから始めて、微調整するのがおすすめです。

  • 数値とグラフは連動：制御点をドラッグすると数値が変わり、数値を入れると制御点が動きます。
  • x は時間・y は進行度：横軸xは 0（開始）〜1（終了）の時間、縦軸yは 0（開始位置）〜1（終了位置）の進み具合です。
  • プリセット：linear は等速、ease は既定の自然な加減速、ease-in は加速、ease-out は減速、ease-in-out は両端がなめらかです。
  • そのまま使える：出力を transition や animation-timing-function に貼り付けてください（例：transition: transform .4s cubic-bezier(.25,.1,.25,1);）。

こんな場面で便利です

  • ボタンやモーダルの出入りに、既定の ease より気持ちよい動きを付けたいとき
  • y を 1 より大きくして、通り過ぎてから戻る「弾む」オーバーシュートを作りたいとき
  • デザイナーが指定したイージングカーブを、実際の CSS 値に落とし込みたいとき
  • ease-in-out などのキーワードでは物足りず、独自のカーブを数値で管理したいとき

出力は先頭の 0 と末尾の余分な 0 を省いた簡潔な表記（例：cubic-bezier(.25,.1,.25,1)）です。CSS ではこの表記も cubic-bezier(0.25, 0.1, 0.25, 1) も同じ意味になります。

よくある質問

入力した値はサーバーに送信されますか？
いいえ。計算と描画はすべてお使いのブラウザ内で完結し、入力した数値やドラッグ操作が外部に送信・保存されることはありません。安心してご利用いただけます。
cubic-bezier の4つの数字は何を表しますか？
曲線は (0,0) から (1,1) へ進む固定のもので、4つの数字はその途中を曲げる2つの制御点 P1(x1,y1) と P2(x2,y2) の座標です。横軸xは時間の進み具合(0が開始、1が終了)、縦軸yはアニメーションの進行度(0が開始位置、1が終了位置)を表します。x1とx2は時間なので0〜1に制限され、y1とy2は自由に指定できます。
yが0〜1の外に出てもよいのですか？
はい。yは進行度なので0〜1の範囲を超えても構いません。y>1にすると終点を一度通り過ぎてから戻る「オーバーシュート(行き過ぎ)」、y<0にすると動き始める前に少し逆方向へ引く「アンティシペーション(引き)」の表現になり、弾むような生き生きしたアニメーションを作れます。xは時間軸なので0〜1に収める必要があります。