曲線と実際の動き
cubic-bezier.comは、CSSの動きの進み方を曲線で見比べる道具です。今回、ease-outに当たるcubic-bezier(0,0,.58,1)を開き、「GO!」で再生しました。ブラウザが再生したアニメーションの指定も、1000ms・同じ曲線になっていました。
同じ1秒でも、途中の位置まで同じにはなりません。linearとease-outを比べる自作実験では、再生と静止スライダーで違いを確かめられます。
同じ値で試す手順
- 今回使った曲線のURLを開きます。
- 上部の値がcubic-bezier(0,0,.58,1)、時間の指定が1秒になっていることを確かめます。
- 「GO!」を押し、2つの動きを見比べます。再度押すと試し直せます。
- 表示されているCSSの値を自分のコードへ写し、対象の要素で確認します。
Libraryのプリセットは比較する曲線として使われます。プリセットを押しただけで上部の編集対象も同じ値になった、とは扱わず、出力された値を確認してください。今回、COPYによるクリップボードへの保存やLibraryの保存・書き出しは未検証です。
自分のページに使う
.box {
transition: transform 200ms cubic-bezier(0,0,.58,1);
}
.box:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
.box { transition: none; }
}上は自分のCSSに組み込む最小例です。記事の比較は違いを観察するため1秒にしていますが、操作への反応を毎回1秒待たせる設計を勧めるものではありません。動きがなくても状態が分かる表示、キーボード操作、動きを減らす設定も別に確認します。
曲線は時間と進み具合の対応を決めるもので、表示の滑らかさや端末の描画性能を測るツールではありません。入力時間に当たる2つのx座標は0〜1の範囲です。y座標には範囲外の値も指定できるため、はみ出す動きを選ぶ場合は重なりや見切れに注意します。
作者・条件・確認範囲
作者はLea Verou様。公式リポジトリのソフトウェアはMITで、著作権・許諾文の全文を保存しています。曲線の仕様はMDNのcubic-bezier資料も参照しました。
2026年10月16日、PCで曲線URLを開く操作、表示値、1秒の再生を確認。今回の操作に登録・支払い・インストールは不要でした。スマホ実機での編集、全機能、全通信の監査は未確認です。最近の流行や作者のAI利用は確認していません。