Repository files navigation

A new JavaScript API for driving animated content on the web. By unifyingthe animation features of SVG and CSS, Web Animations unlocks featurespreviously only usable declaratively, and exposes powerful, high-performanceanimation capabilities to developers.

A JavaScript implementation of the Web Animations API that provides WebAnimation features in browsers that do not support it natively. The polyfillfalls back to the native implementation when one is available.

Here's a simple example of an animation that fades and scales a<div>.
Try it as a live demo.

<!-- Include the polyfill --><scriptsrc="web-animations.min.js"></script><!-- Set up a target to animate --><divclass="pulse"style="width: 150px;">Hello world!</div><!-- Animate! --><script>varelem=document.querySelector('.pulse');varanimation=elem.animate({opacity:[0.5,1],transform:['scale(0.5)','scale(1)'],},{direction:'alternate',duration:500,iterations:Infinity,});</script>

• Codelab tutorial
• Examples of usage
• Live demos
• MDN reference
• W3C specification

• For feedback on the API and the specification:

  • File an issue on GitHub:https://github.com/w3c/web-animations/issues/new
  • Alternatively, send an email topublic-fx@w3.org with subject line"[web-animations] ... message topic ..."(archives).

• For issues with the polyfill, report them on GitHub:https://github.com/web-animations/web-animations-js/issues/new.

Breaking polyfill changes will be announced on this low-volume mailing list:web-animations-changes@googlegroups.com.

• Technical details about the polyfill
  • Browser support
  • Fallback to native
  • Feature list
  • Feature deprecation and removal processes
• To test experimental API features, try one of theexperimental targets