Web Animations API Sandbox - Online JS Animation Editor

The Web Animations API is a native browser JavaScript API that allows developers to create, control, and sequence animations directly from JavaScript. It unifies CSS animations/transitions and SVG animations under a single powerful interface. With WAAPI, you can create complex animations using element.animate(), control playback, reverse animations, adjust speed, and respond to animation events—all programmatically without relying on external libraries.

CSS animations are declarative and defined in stylesheets—great for simple, pre-defined animations. WAAPI is imperative and JavaScript-driven, giving you dynamic control: you can pause, resume, reverse, or seek animations at runtime; adjust playback rate on the fly; chain animations using Promises (animation.finished); and create animations based on user interaction or real-time data. WAAPI also provides better performance for complex animations since it leverages the browser's compositor thread.

WAAPI enjoys broad support across all modern browsers: Chrome (51+), Firefox (48+), Safari (13.1+), Edge (79+), and Opera (38+). Mobile browsers including iOS Safari (13.4+) and Chrome for Android also fully support the core API. For older browsers, a polyfill is available. As of 2024, global browser support exceeds 95%, making WAAPI production-ready for most web projects.

Use element.animate(keyframes, options). Keyframes is an array of objects defining CSS property values at each step. Options include duration (ms), iterations (number or Infinity), easing, fill, and direction. Example: el.animate([{opacity:0},{opacity:1}],{duration:500}). The method returns an Animation object you can control with .play(), .pause(), .reverse(), etc.

Keyframe offsets specify the position of each keyframe along the animation timeline, expressed as a number between 0 and 1 (0 = start, 1 = end). Use the offset property in each keyframe object to control exact timing. For example: [{opacity:0,offset:0},{opacity:0.8,offset:0.3},{opacity:1,offset:1}]. If offsets are omitted, they're distributed evenly. Offsets give you fine-grained control over animation pacing.

Yes! WAAPI provides the animation.finished property which returns a Promise that resolves when the animation completes. You can chain animations using .then() or async/await: await el.animate([...],{duration:500}).finished; await el.animate([...],{duration:300}).finished;. This makes sequencing complex multi-step animations clean and manageable, without nested setTimeout calls.

WAAPI supports all standard CSS easing functions: ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, and custom cubic-bezier() curves. You can also use steps() for frame-by-frame animation. The easing can be set globally in timing options or per-keyframe for even more control.

The fill option controls how styles are applied before and after the animation. 'none' (default): styles only apply during active playback. 'forwards': the element retains the last keyframe's styles after the animation ends. 'backwards': styles from the first keyframe are applied during any delay. 'both': combines forwards and backwards behavior. Fill modes are especially useful for animations that should leave elements in a final state.