イージングの選び方をグラフで説明する — 400msの内訳

アニメーションの議論は、感覚の言葉で終わりがちだ。「もう少しキビキビ」「もっと柔らかく」。開発者に伝えるには、どの時点で何%動いているかという数字に置き換える必要がある。

本誌の記事カードで使っている400msのアニメーションを例に、時間の内訳を分解してみる。

最初の100msで70%動かす

本誌で使っているイージングはcubic-bezier(0.2, 0.7, 0.2, 1)だ。グラフにすると、開始直後に急な立ち上がりがあり、後半はゆっくり止まる。最初の100msで全体の約70%の距離を移動し、残りの300msで減速して停止する。

操作に対する反応は100ms以内に始まらないと遅れて感じられる。立ち上がりを急にすることで、全体を400msにしても「すぐ反応した」印象を保てる。

なぜ後半を長く取るのか

動きの終わりがはっきりしていると、要素がどこに落ち着いたかを目で追いやすい。後半300msの減速は、移動後の位置を読者に確認させる時間でもある。

短くするべき場面

メニューの開閉など、繰り返し行う操作では200ms程度に縮める。1日に何十回も見る動きが400msあると、待たされている感覚が積み重なるからだ。

動かさない選択

OSの設定で「視差効果を減らす」を有効にしている読者には、prefers-reduced-motionで移動を止め、不透明度の変化だけを残している。動きそのものを消すのではなく、情報として必要な変化だけを残すという考え方だ。

@media (prefers-reduced-motion: reduce) { .card { transition: opacity 120ms linear; transform: none; } }