# What is the Web Animations API?

> The Web Animations API (WAAPI) is a browser JavaScript API for animating elements with element.animate(keyframes, options). It runs on the same engine as CSS animations, so it is fast, but gives you control from code: play, pause, reverse, seek, change speed and wait for finished. It is supported in all modern browsers and needs no library.

Updated November 2026. Source: https://www.exodeui.com/questions/what-is-the-web-animations-api/

## Key takeaways

- element.animate(keyframes, options) returns an Animation object
- Control: play(), pause(), reverse(), currentTime, playbackRate
- animation.finished is a Promise you can await
- Uses the browser animation engine; transform and opacity can run off the main thread
- Libraries such as Motion build on it

## Frequently asked questions

### Is the Web Animations API supported everywhere?

The core element.animate() API works in all current major browsers.

### Is WAAPI faster than requestAnimationFrame?

For transform and opacity, usually yes, because the browser can run it off the main thread.

### Can I use WAAPI in React?

Yes. Call element.animate on a ref inside an effect or event handler.

### Does WAAPI support scroll-driven animation?

Yes, with ScrollTimeline and ViewTimeline in browsers that support scroll-driven animations.

## Related

- [View Transitions API](https://www.exodeui.com/learn/view-transitions-api)
- [Framer Motion vs CSS](https://www.exodeui.com/compare/framer-motion-vs-css)
- [Modern web animation stack](https://www.exodeui.com/learn/modern-web-animation-stack)
- [Best web animation tools](https://www.exodeui.com/best-web-animation-tools)