500msの位置を比べる
時間を同じ1秒にそろえても、進み方を変えると途中の位置は変わります。以下は編集部が作った比較です。linearは一定の割合で進み、ease-outは終点へ近づくにつれてゆっくりになります。500ms時点の移動率は50.0%と約68.5%でした。
自分で動かして確かめる
- 初期表示の500msで、2つの位置と数字を比べます。
- スライダーを0ms・500ms・1000msへ動かします。キーボードの左右キーでも50msずつ変更できます。
- 「1秒の動きを比較する」を押します。両方が同時に動き、同じ1000msで終点へ到達します。
- 途中で「止めて0msへ戻す」を押すと再生を中断できます。保存したHTMLもブラウザだけで開けます。
端末の「動きを減らす」設定が有効な場合、ボタンでは動かさず終点を表示します。スライダーによる静止比較はそのまま使えます。動きは自動再生せず、操作したときだけ再生します。
半分の時間で半分にならない理由
linearなら、経過時間の割合と移動の割合が一致します。ease-outに使ったcubic-bezier(0,0,.58,1)は、曲線の横軸が経過時間、縦軸が進み具合です。横軸が0.5になる点を求め、その点の縦軸を読むと約0.6846になります。
// 同じ開始位置・終点・時間で、easingだけを変える
element.animate(
[{ transform: "translateX(0)" },
{ transform: "translateX(300px)" }],
{ duration: 1000, easing: "cubic-bezier(0,0,.58,1)" }
);静止表示の数値は、曲線の横軸を二分探索して求めた自作計算です。ブラウザの再生にはWeb Animations APIを使い、毎フレームの実描画を計測してはいません。曲線のパラメーターへそのまま0.5を代入した値を「500msの位置」とすると、違う結果になります。
曲線を見比べる公式ツールの操作例も用意しました。指定方法はMDNのcubic-bezier資料を参照しています。
実装時の注意と確認範囲
比較しやすいよう1秒にしていますが、短いボタンの反応まで1秒待たせる推奨値ではありません。移動距離、内容の読みやすさ、停止できること、動かなくても伝わることを合わせて確認します。速度曲線が整っていても、描画の重さや使いやすさが保証されるわけではありません。
2026年10月16日、PCで500msの数値、1秒再生の終了、停止、動きを減らす設定を確認。自作HTML・CSS・JavaScriptはCC0で、外部ライブラリや通信は不要です。スマホ実機、全ブラウザ、フレーム単位の描画精度は未検証です。最近の流行を示す記事ではなく、読者が再現できる比較実験として制作しました。