Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

web-animations/web-animations-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

1,468 Commits

Repository files navigation

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

.
Try it as a live demo.

">
<script src="web-animations.min.js">script>


<div class="pulse" style="width: 150px;">Hello world!div>


<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

About

JavaScript implementation of the Web Animations API

Resources

Readme

License

Apache-2.0 license

Contributing

Contributing

Stars

Watchers

Forks

Packages

Contributors