v151 · javascript · web animations

Conduct a running animation

The animation is declared in pure CSS. The moment it starts, event.animation hands you its Web Animations handle — so a button can pause, reverse, retime, or cancel it.

CSS
handle source
—
playState
idle
playbackRate
1
currentTime (ms)
0

How it works

let handle = null;
orbit.addEventListener("animationstart", (event) => {
  // event.animation is nullable (CSSAnimation?) — reject a missing handle.
  const animation = event.animation;
  if (!animation) return;
  handle = animation;
});
pauseBtn.onclick = () => handle?.pause();
reverseBtn.onclick = () => handle?.reverse();
speedBtn.onclick  = () => { if (handle) handle.playbackRate = 3; };
cancelBtn.onclick = () => handle?.cancel();

see also