https://github.com/web-animations/web-animations-js

JavaScript implementation of the Web Animations API
https://github.com/web-animations/web-animations-js

Last synced: 4 days ago
JSON representation

JavaScript implementation of the Web Animations API

• Host: GitHub
• URL: https://github.com/web-animations/web-animations-js
• Owner: web-animations
• License: apache-2.0
• Created: 2014-11-13T03:26:15.000Z (about 10 years ago)
• Default Branch: dev
• Last Pushed: 2021-06-20T11:58:39.000Z (over 3 years ago)
• Last Synced: 2024-10-29T15:07:33.346Z (about 2 months ago)
• Language: JavaScript
• Homepage: http://web-animations.github.io
• Size: 2.32 MB
• Stars: 3,766
• Watchers: 154
• Forks: 408
• Open Issues: 91
• Metadata Files:
  • Readme: README.md
  • Changelog: History.md
  • Contributing: CONTRIBUTING.md
  • License: COPYING

Awesome Lists containing this project

README

        

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.](http://jsbin.com/yageyezabo/edit?html,js,output)


```html

Hello world!


    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,

    });

```

Documentation

-------------

* [Codelab tutorial](https://github.com/web-animations/web-animations-codelabs)

* [Examples of usage](/docs/examples.md)

* [Live demos](https://web-animations.github.io/web-animations-demos)

* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)

* [W3C specification](https://drafts.csswg.org/web-animations/)

We love feedback!

-----------------

* For feedback on the API and the specification:

    * File an issue on GitHub: 

    * Alternatively, send an email to  with subject line

"[web-animations] ... message topic ..."

([archives](http://lists.w3.org/Archives/Public/public-fx/)).

* For issues with the polyfill, report them on GitHub:

.

Keep up-to-date

---------------

Breaking polyfill changes will be announced on this low-volume mailing list:

[[email protected]](https://groups.google.com/forum/#!forum/web-animations-changes).

More info

---------

* [Technical details about the polyfill](/docs/support.md)

    * [Browser support](/docs/support.md#browser-support)

    * [Fallback to native](/docs/support.md#native-fallback)

    * [Feature list](/docs/support.md#features)

    * [Feature deprecation and removal processes](/docs/support.md#process-for-breaking-changes)

* To test experimental API features, try one of the

  [experimental targets](/docs/experimental.md)