CSSアニメーションのイージング曲線を視覚的に作成
cubic-bezier(0.25, 0.1, 0.25, 1)
CSSアニメーションの「動きの緩急」を決める timing-function を、視覚的に作成できる無料ツールです。グラフ上の2つの制御点（P1・P2）をドラッグすると、リアルタイムでベジェ曲線が描き替わり、対応する cubic-bezier(x1, y1, x2, y2) の文字列が上部に表示されます。コピーボタンを押せばそのままCSSに貼り付けられ、インストールや会員登録は不要、すべての計算はお使いの端末内で完結します。
数値を細かく指定したい場合は、x1・y1・x2・y2 の入力欄に直接値を入れることもできます。グラフの操作と数値入力は連動しており、どちらを変更してももう一方に反映されます。ease・ease-in・ease-out・ease-in-out・linear のプリセットボタンを押すと、CSS標準キーワードに対応した値がすぐに入力されます。
曲線の形だけでは実際の動きがイメージしづらいものです。「再生 ▶」ボタンを押すと、いま編集中の cubic-bezier を timing-function に使ってボックスが左から右へ移動し、加速・減速の様子を目で確かめられます。再生時間（duration）はスライダーで 0.2〜3秒の範囲に調整でき、ゆっくり／速い動きの違いも比較できます。
cubic-bezier() は3次ベジェ曲線でイージングを表します。曲線は必ず始点 (0,0) から終点 (1,1) を通り、その間の形を2つの制御点 P1(x1, y1)・P2(x2, y2) で調整します。横軸は時間の進み（0=開始、1=終了）、縦軸はアニメーションの進み（0=初期値、1=最終値）を表します。曲線が急なところは変化が速く、緩やかなところは変化が遅い、という対応になります。
| キーワード | cubic-bezier | 動きの特徴 |
|---|---|---|
| linear | cubic-bezier(0, 0, 1, 1) | 一定速度。緩急なし |
| 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) | ゆっくり始まりゆっくり終わる |
制御点の x 座標（x1, x2）は 0〜1 の範囲に限られます。時間は逆行できないためです。一方、y 座標（y1, y2）は 0〜1 を超える値や負の値も指定でき、一度行き過ぎてから戻る「オーバーシュート（バウンド）」のような動きを作れます。このエディタでは縦方向に余白をとっており、y を約 -0.5〜1.5 の範囲までドラッグできます。
作成した値は、transition や animation の timing-function に貼り付けて使います。例えば transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); や animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); のように指定します。適切なイージングを選ぶと、UIの操作感やアニメーションの印象が大きく変わります。