You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jianglk.darker 7ee447c011
v811_spc009_project
7 months ago
..
docs v811_spc009_project 7 months ago
externs v811_spc009_project 7 months ago
src v811_spc009_project 7 months ago
.bower.json v811_spc009_project 7 months ago
CONTRIBUTING.md v811_spc009_project 7 months ago
COPYING v811_spc009_project 7 months ago
History.md v811_spc009_project 7 months ago
README.md v811_spc009_project 7 months ago
bower.json v811_spc009_project 7 months ago
web-animations-next-lite.min.html v811_spc009_project 7 months ago
web-animations-next-lite.min.js v811_spc009_project 7 months ago
web-animations-next-lite.min.js.map v811_spc009_project 7 months ago
web-animations-next.min.html v811_spc009_project 7 months ago
web-animations-next.min.js v811_spc009_project 7 months ago
web-animations-next.min.js.map v811_spc009_project 7 months ago
web-animations.html v811_spc009_project 7 months ago
web-animations.min.html v811_spc009_project 7 months ago
web-animations.min.js v811_spc009_project 7 months ago
web-animations.min.js.map v811_spc009_project 7 months ago

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