イージング曲線エディタ

CSS の cubic-bezier() を、2つの制御点をドラッグして作ります。動きを再生して確かめ、そのままコピーできます。

横＝時間（0→1）、縦＝進み具合。点線は linear。点を選んで矢印キーでも動かせます（Shiftで0.1ずつ）。

制御点の値

プリセット

プレビュー

時間（ミリ秒）

この曲線

linear（比較）

CSS

x は時間なので 0〜1 の範囲に限られます（CSS の仕様）。y は範囲外も使え、1を超えると行き過ぎて戻る「バウンド風」、0未満だと一度引いてから進む動きになります。ここでは y を −1〜2 に収めています。

イージング曲線エディタでできること

CSSのアニメーションやトランジションで使うcubic-bezier()の値を、グラフ上の2つの制御点を動かして作ります。動きを再生して確かめ、CSSをそのままコピーできます。

グラフの赤い点（制御点1）と緑の点（制御点2）をドラッグします。点を選んで矢印キーでも動かせます（Shiftで0.1ずつ）。
細かく合わせたいときは「制御点の値」のx1・y1・x2・y2に数値を入れます。
「プリセット」からease・ease-in-out・easeOutBackなどを選ぶと、その値から調整できます。
「プレビュー」の時間（ミリ秒）を決めて「再生」を押し、linearの箱と動きを比べます。
「CSSをコピー」でtransition-timing-functionとanimation-timing-functionの2行を、「値だけコピー」でcubic-bezier(…)だけをコピーします。

CSSのeaseはcubic-bezierでいくつですか？

easeはcubic-bezier(0.25, 0.1, 0.25, 1)です。プリセットの「ease」を押すと値とグラフが表示され、そこから調整もできます。

ボタンが少し跳ねるような動きにするには？

y2を1より大きくすると、目標を行き過ぎてから戻る動きになります。プリセットの「easeOutBack」(0.34, 1.56, 0.64, 1)を選んで再生すると確かめられます。

transitionとanimationで書き方は違いますか？

値は同じで、プロパティ名がtransition-timing-functionとanimation-timing-functionで異なります。「CSSをコピー」で両方の行をまとめてコピーできます。

xに1より大きい値を入れられないのはなぜですか？

xは時間の進み具合を表し、CSSの仕様で0〜1の範囲と決められているためです。範囲外の値は無効になるので、このツールでは自動で0〜1に収めます。