web-animations/web-animations-js

★ 3,777JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Web Animations polyfill))
    What it does
      JavaScript animation API
      Cross-browser support
      Polyfill for old browsers
    How to use
      Add one script tag
      Call element.animate
      Pass keyframes and options
    Animation controls
      Duration and direction
      Repeat count
      Pause and resume
    Resources
      MDN documentation
      W3C specification
      Live demos
    Audience
      Frontend developers

mindmap root((Web Animations polyfill)) What it does JavaScript animation API Cross-browser support Polyfill for old browsers How to use Add one script tag Call element.animate Pass keyframes and options Animation controls Duration and direction Repeat count Pause and resume Resources MDN documentation W3C specification Live demos Audience Frontend developers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Animate DOM elements using JavaScript native animate() method in browsers that do not yet support the Web Animations API.

USE CASE 2

Replace CSS animation rules with JavaScript-driven animations that you can pause, reverse, or control dynamically.

USE CASE 3

Build cross-browser animation sequences that work identically in older and modern browsers.

USE CASE 4

Animate SVG elements through a unified JavaScript API instead of relying on SVG-specific animation syntax.

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Add a single script tag to your page and write animations using the standard element.animate() method.

In plain English

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.

Copy-paste prompts

Prompt 1

Show me how to use the Web Animations API with the web-animations-js polyfill to fade in and scale up a div when the page loads.

Prompt 2

I want to chain two animations together using the Web Animations polyfill: first slide an element in, then change its color. How?

Prompt 3

How do I pause and resume a Web Animations API animation started with element.animate()? Show me a button that toggles playback.

Prompt 4

Replace this CSS @keyframes animation with equivalent JavaScript using element.animate() and the web-animations-js polyfill.

Prompt 5

Show me how to animate multiple SVG elements in sequence using the Web Animations API, waiting for each to finish before the next starts.

Open on GitHub → Explain another repo

← web-animations on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.