JavaScript implementation of the Web Animations API
Clone or download
Permalink
Failed to load latest commit information.
docs Update the Web Animations spec URLs (#191) Jun 13, 2018
externs Update the Web Animations spec URLs (#191) Jun 13, 2018
node_modules Update chai Nov 11, 2014
src Update the Web Animations spec URLs (#191) Jun 13, 2018
templates Revert to simple test runner Jun 26, 2014
test Parse and evaluate calc expressions Jul 19, 2017
.gitignore cleanUpClean May 5, 2016
.gitmodules redirectWPT Jun 6, 2016
.travis-setup.sh travisFirefoxStable May 17, 2016
.travis.yml updateNodeToV6 Apr 12, 2017
CONTRIBUTING.md Address comments Jul 21, 2017
COPYING Initial revision Jun 5, 2014
Gruntfile.js testEVERYTHINGAAAA Apr 19, 2017
History.md Update the Web Animations spec URLs (#191) Jun 13, 2018
README.md Update the Web Animations spec URLs (#191) Jun 13, 2018
bower.json Fix source map file not exists issues Nov 11, 2016
package.json Update minimatch dependency Aug 16, 2017
target-config.js Working without expectations Jun 6, 2016
target-loader.js Added some license headers. Feb 19, 2015
web-animations-next-lite.dev.html Implement object-form keyframe syntax. Mar 18, 2016
web-animations-next-lite.dev.js Remove dupe tests. Mar 23, 2015
web-animations-next-lite.min.html add html exports for standard, next and next-lite builds Nov 11, 2016
web-animations-next.dev.html Implement object-form keyframe syntax. Mar 18, 2016
web-animations-next.dev.js Remove dupe tests. Mar 23, 2015
web-animations-next.min.html add html exports for standard, next and next-lite builds Nov 11, 2016
web-animations.dev.html Implement object-form keyframe syntax. Mar 18, 2016
web-animations.dev.js Remove dupe tests. Mar 23, 2015
web-animations.html Remove dupe tests. Mar 23, 2015
web-animations.min.html add html exports for standard, next and next-lite builds Nov 11, 2016

README.md

What is Web Animations?

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

What is in this repository?

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

Quick start

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

<!-- Include the polyfill -->
<script src="web-animations.min.js"></script>

<!-- Set up a target to animate -->
<div class="pulse" style="width: 150px;">Hello world!</div>

<!-- Animate! -->
<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>

Documentation

We love feedback!

Keep up-to-date

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

More info