Web Animations API — the pause button CSS never had

<div class="pg">
    <h1 class="pg-title">🎮 The pause button CSS animations never had</h1>
    <p class="pg-sub">
      This box is driven by one <code>element.animate()</code> call. Every button below
      calls a method directly on the <code>Animation</code> object it returned —
      no CSS classes added or removed, no reflow hack.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn primary" id="playBtn">▶️ Play</button>
        <button class="btn" id="pauseBtn">⏸️ Pause</button>
        <button class="btn" id="reverseBtn">⏪ Reverse</button>
        <button class="btn ghost" id="resetBtn">↺ Reset</button>
      </div>

<div style="margin-top:16px">
        <label class="hint" for="scrub">Scrub to a point in the animation — sets <code>anim.currentTime</code> directly</label>
        <input type="range" id="scrub" min="0" max="100" value="0" />
      </div>

<div style="margin-top:12px">
        <label class="hint" for="rate">Playback speed: <span id="rateLabel">1x</span> — sets <code>anim.playbackRate</code></label>
        <input type="range" id="rate" min="0.25" max="3" step="0.25" value="1" />
      </div>

<label class="toggle" style="margin-top:12px">
        <input type="checkbox" id="fillToggle" /><span class="switch"></span>
        <span>Keep the end position when it finishes (<code>fill: "forwards"</code>)</span>
      </label>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="slow">Preset: slow motion</button>
        <button class="btn sm" data-preset="reverse-half">Preset: reverse from the middle</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="track" id="track">
        <div class="box" id="box">📦</div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Idle — press play.</span>
      </div>
      <p class="hint" id="caption">
        Nothing here is a CSS class toggle. <code>Reverse</code> flips playback direction from
        wherever the box currently is — not from the start. <code>Scrub</code> jumps straight to
        a point in time. Try dragging the scrubber while it's playing.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.