1 min lesson

CSS animation vs the Web Animations API

Match each case in "CSS animation vs the Web Animations API" to the signal and response that fit it.

CSS animation vs the Web Animations APIdeclarative when you can, imperative when you must

CSS transitions and keyframes are the right default. They are declarative, the browser optimizes them and they survive a busy main thread. Reach for the Web Animations API when motion has to be dynamic - a value computed at runtime, a spring you cancel mid-flight or choreography you sequence in code.

CSS transitions / keyframes

Hover, focus, simple enter/exit

Known start and end states

Cheapest to write and to run

Hard to interrupt cleanly mid-flight

Web Animations API (element.animate)

Runtime-computed values, sequencing

Cancel, reverse, read currentTime

Promise on .finished for chaining

Composites off-main-thread like CSS

WAAPI gives you a handle you can interrupt - useful for gestures and drag-release.ts

const anim = el.animate(
  [{ transform: "translateY(8px)", opacity: 0 },
   { transform: "translateY(0)",   opacity: 1 }],
  { duration: 180, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "both" }
);
anim.finished.then(() => el.classList.add("settled"));
// Interruptible: anim.reverse() or anim.cancel() at any time.

CSS animation vs the Web Animations API

Step 1 of 2

CSS animation vs the Web Animations APIdeclarative when you can, imperative when you must