📈 cubic-bezier イージング作成
CSSの transition / animation で使うイージング曲線を、2つの制御点をドラッグしながら視覚的に編集できます。cubic-bezier(x1, y1, x2, y2) を出力し、実際のボックスアニメーションで動きを確認。処理はすべてブラウザ内で完結します。
曲線エディタ
CSS 値
cubic-bezier(0.25, 0.1, 0.25, 1)
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
プレビュー
左端から右端まで、いま作っている曲線で実際にボックスを動かします。曲線の傾きが急なほど速く、緩いほどゆっくり動きます。
プリセット
選ぶと曲線・数値・プレビューがそのイージングに切り替わります。上段はCSSの標準キーワード、下段はよく使われるイージングです。
解説
cubic-bezier（キュービックベジェ）は、CSSのアニメーションで「時間の進み方＝速度変化」を指定する関数です。transition や animation の timing-function に cubic-bezier(x1, y1, x2, y2) と書くと、開始が (0,0)、終了が (1,1) に固定された3次ベジェ曲線に沿ってアニメーションが進みます。横軸が経過時間、縦軸が進行度で、曲線が急な区間ほど速く、緩やかな区間ほどゆっくり動きます。このツールは、その曲線を数式ではなく「見た目」で調整できるようにしたものです。
曲線を決めるのは、原点と終点を引っぱる2本の“取っ手”の先にある制御点 P1(x1,y1) と P2(x2,y2) です。x1・x2 は時間軸なので 0〜1 の範囲に制限されますが、y1・y2 は範囲外も許可しています。y を1より大きくすると一度行き過ぎてから戻る、0より小さくすると一度手前に引いてから進む——といった、いわゆる「バック（オーバーシュート）」の動きが作れます。out-back や in-out-back のプリセットがその代表例で、ポップアップやボタンの登場に躍動感を与えたいときに便利です。
曲線の描画は外部ライブラリを使わず、3次ベジェの式 B(t)=3(1-t)²t·P1+3(1-t)t²·P2+t³·P3 を細かく分割して自前で折れ線化しています。一方プレビューは、生成した timing-function を実際のCSS transition に渡し、ブラウザ本体にイージングを計算させています。つまり画面に見える曲線と、ボックスの動きは同じ定義から作られており、コピーした値をそのまま貼れば表示どおりに動きます。
CSSには ease / linear / ease-in / ease-out / ease-in-out という標準キーワードがあり、それぞれ決まった cubic-bezier 値に対応します（例: ease は cubic-bezier(0.25, 0.1, 0.25, 1)）。既定の ease で物足りないとき、微妙に効きを強めたり、独自の“らしさ”を出したいときに、このツールで少しずつ調整するのがおすすめです。入力した値はどこにも送信されず、オフラインでも利用できます。
よくある質問
cubic-bezier とは何ですか？
CSSアニメーションの速度変化（イージング）を4つの数値で指定する関数です。cubic-bezier(x1, y1, x2, y2) と書き、開始点(0,0)と終了点(1,1)を結ぶ曲線を2つの制御点で調整します。曲線が急なほどその区間は速く、緩いほどゆっくり動きます。
x と y はそれぞれ何を表しますか？
横軸xが経過時間（0=開始、1=終了）、縦軸yが進行度（0=まだ動いていない、1=動き終わり）です。制御点P1(x1,y1)は動き出し側、P2(x2,y2)は着地側の効き方を決めます。
なぜ x は0〜1に制限され、y は範囲外にできるのですか？
xは時間軸で、時間が戻ったり終端を超えたりはできないため0〜1に制限されます。yは進行度で、1を超えて行き過ぎたり0未満で一度引いたりという“オーバーシュート”を表現できるよう、範囲外を許可しています。
ease と ease-in-out はどんな cubic-bezier ですか？
CSS標準キーワードは決まった値に対応します。ease=cubic-bezier(0.25, 0.1, 0.25, 1)、ease-in=cubic-bezier(0.42, 0, 1, 1)、ease-out=cubic-bezier(0, 0, 0.58, 1)、ease-in-out=cubic-bezier(0.42, 0, 0.58, 1)、linear=cubic-bezier(0, 0, 1, 1) です。プリセットから選べます。
out-back のように一度行き過ぎる動きは作れますか？
作れます。y1やy2を1より大きく（または0より小さく）すると、行き過ぎてから戻る「バック」の動きになります。プリセットの out-back / in-back / in-out-back が代表例で、制御点をグラフの外側にドラッグしても同じ効果が得られます。
出力した値はそのまま transition に使えますか？
はい。transition-timing-function: cubic-bezier(...) や animation-timing-function に指定できます。ツールでは transition-timing-function: …; と transition: all 0.4s …; の一行もコピーできるので、CSSに貼るだけで使えます。
スマートフォンでも制御点を動かせますか？
動かせます。ポインタイベントで実装しているため、指でのドラッグ（タッチ）に対応しています。細かい調整は数値入力欄や、点を選んでからの矢印キーが便利です。
入力した値はサーバーに送られますか？
送られません。曲線の計算・描画・プレビューはすべてブラウザ内で完結し、値はどこにも送信されません。オフラインでも利用できます。