README.md
1
2What is Web Animations?
3-----------------------
4
5A new JavaScript API for driving animated content on the web. By unifying
6the animation features of SVG and CSS, Web Animations unlocks features
7previously only usable declaratively, and exposes powerful, high-performance
8animation capabilities to developers.
9
10What is in this repository?
11---------------------------
12
13A JavaScript implementation of the Web Animations API that provides Web
14Animation features in browsers that do not support it natively. The polyfill
15falls back to the native implementation when one is available.
16
17Quick start
18-----------
19
20Here's a simple example of an animation that fades and scales a `<div>`.
21[Try it as a live demo.](http://jsbin.com/yageyezabo/edit?html,js,output)
22
23```html
24<!-- Include the polyfill -->
25<script src="web-animations.min.js"></script>
26
27<!-- Set up a target to animate -->
28<div class="pulse" style="width: 150px;">Hello world!</div>
29
30<!-- Animate! -->
31<script>
32 var elem = document.querySelector('.pulse');
33 var animation = elem.animate({
34 opacity: [0.5, 1],
35 transform: ['scale(0.5)', 'scale(1)'],
36 }, {
37 direction: 'alternate',
38 duration: 500,
39 iterations: Infinity,
40 });
41</script>
42```
43
44Documentation
45-------------
46
47* [Codelab tutorial](https://github.com/web-animations/web-animations-codelabs)
48* [Examples of usage](/docs/examples.md)
49* [Live demos](https://web-animations.github.io/web-animations-demos)
50* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
51* [W3C specification](http://w3c.github.io/web-animations/)
52
53We love feedback!
54-----------------
55
56* For feedback on the API and the specification:
57 * File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>
58 * Alternatively, send an email to <public-fx@w3.org> with subject line
59"[web-animations] ... message topic ..."
60([archives](http://lists.w3.org/Archives/Public/public-fx/)).
61
62* For issues with the polyfill, report them on GitHub:
63<https://github.com/web-animations/web-animations-js/issues/new>.
64
65Keep up-to-date
66---------------
67
68Breaking polyfill changes will be announced on this low-volume mailing list:
69[web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!forum/web-animations-changes).
70
71More info
72---------
73
74* [Technical details about the polyfill](/docs/support.md)
75 * [Browser support](/docs/support.md#browser-support)
76 * [Fallback to native](/docs/support.md#native-fallback)
77 * [Feature list](/docs/support.md#features)
78 * [Feature deprecation and removal processes](/docs/support.md#process-for-breaking-changes)
79* To test experimental API features, try one of the
80 [experimental targets](/docs/experimental.md)
81