イージング4レーン比較

linear / ease-out / ease-in-out / spring 風の4レーンを同時に走らせて、同じ1秒でも「速く入って遅く止まる」動きが自然に見える理由を目で確かめる。

ENGLISH

Easing Comparison Lanes

約126行動きと演出 / モーション・トランジションの一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

デザインの要点

UI の既定は ease-out（速く入って遅く止まる）。押した瞬間に反応が見え、止まり際が読めるので操作が軽く感じる
ease-in は出だしが遅く「待たされる」印象になる。消える・退場する要素にだけ使う
linear は機械的で、止まった瞬間が唐突。回転・進捗バーなど等速が意味を持つものに限る
spring 風（cubic-bezier の y>1 でオーバーシュート）は行き過ぎて戻る分、質量を感じる。多用せず主役の1要素に

プロのサイトでの実例

Motion別サイト ↗アニメーションライブラリの公式ドキュメント。イージングとスプリングの使い分けを解説している

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

コード（コピーして使えます）

<div class="ez-wrap">
  <div class="ez-lanes" id="ezLanes">
    <div class="ez-lane" style="--ez-fn: linear">
      <span class="ez-label">linear<code>linear</code></span>
      <span class="ez-track"><span class="ez-ball"></span></span>
    </div>
    <div class="ez-lane" style="--ez-fn: cubic-bezier(0.16, 1, 0.3, 1)">
      <span class="ez-label">ease-out<code>(.16,1,.3,1)</code></span>
      <span class="ez-track"><span class="ez-ball"></span></span>
    </div>
    <div class="ez-lane" style="--ez-fn: cubic-bezier(0.65, 0, 0.35, 1)">
      <span class="ez-label">ease-in-out<code>(.65,0,.35,1)</code></span>
      <span class="ez-track"><span class="ez-ball"></span></span>
    </div>
    <div class="ez-lane" style="--ez-fn: cubic-bezier(0.34, 1.56, 0.64, 1)">
      <span class="ez-label">spring 風<code>(.34,1.56,.64,1)</code></span>
      <span class="ez-track"><span class="ez-ball"></span></span>
    </div>
  </div>
  <div class="ez-foot">
    <button class="ez-btn" id="ezPlay" type="button">▶ 再生</button>
    <span class="ez-dur">同じ 1.2 秒・同じ距離</span>
  </div>
</div>