web-animations-js
JavaScript implementation of the Web Animations API
A polyfill that makes the JavaScript Web Animations API work in browsers that do not support it natively, letting you control animations entirely through JavaScript in any browser.
The Web Animations API is a browser standard that lets developers control animations entirely through JavaScript code, rather than relying on CSS or SVG-specific animation syntax. It brings the animation capabilities of both CSS and SVG under one unified system, making it possible to do things in script that previously required baked-in stylesheet rules.
This repository is a polyfill for that API. A polyfill is a piece of JavaScript you include in a page so that a browser feature works even when the browser does not support it on its own. When a browser already supports the Web Animations API natively, this polyfill steps aside and lets the browser handle it directly. When a browser does not have native support, the polyfill takes over and provides the same behavior.
Using it is straightforward. You add a single script tag to your HTML page pointing to the polyfill file, and then you write animations the standard way: select an element, call its animate method, pass in the properties you want to change and options like duration, direction, and how many times it should repeat. The README includes a short working example that fades and scales a div element.
The project links to a codelab tutorial, a collection of live demos, and the official MDN reference documentation if you want to learn more about the API itself. The W3C specification that defines the standard is also linked for anyone who wants the formal technical definition.
Feedback channels are split by topic: questions about the API design go to the W3C web-animations repository or a public mailing list, while bugs specific to this polyfill go to the issues tracker in this repository. A low-volume mailing list exists to announce any breaking changes to the polyfill so developers can stay informed.
Where it fits
- Animate DOM elements using JavaScript native animate() method in browsers that do not yet support the Web Animations API.
- Replace CSS animation rules with JavaScript-driven animations that you can pause, reverse, or control dynamically.
- Build cross-browser animation sequences that work identically in older and modern browsers.
- Animate SVG elements through a unified JavaScript API instead of relying on SVG-specific animation syntax.