A first example
const anim = document.querySelector('.card').animate(
[
{ transform: 'translateY(12px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 }
],
{ duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)', fill: 'both' }
);
await anim.finished;Why use it instead of CSS
CSS animations are declarative and great for fixed effects. WAAPI is better when values come from JavaScript, when you need to pause, reverse or scrub, or when you need to know exactly when an animation ends. Because it uses the same engine, performance is similar to CSS.
Limits
WAAPI does not do spring physics on its own; you approximate springs with linear() easing or use a library. It animates one element at a time, so choreography and gestures need more code. For many developers, a library such as Motion sits on top of WAAPI and adds those features.
Where runtime tools fit
When a designer builds a multi-state animation, rebuilding it with WAAPI by hand is slow. Runtime tools such as Lottie, Rive and ExodeUI play designed files instead. We make ExodeUI.