| 1 |
|
| 2 | What is Web Animations?
|
| 3 | -----------------------
|
| 4 |
|
| 5 | A new JavaScript API for driving animated content on the web. By unifying
|
| 6 | the animation features of SVG and CSS, Web Animations unlocks features
|
| 7 | previously only usable declaratively, and exposes powerful, high-performance
|
| 8 | animation capabilities to developers.
|
| 9 |
|
| 10 | What is in this repository?
|
| 11 | ---------------------------
|
| 12 |
|
| 13 | A JavaScript implementation of the Web Animations API that provides Web
|
| 14 | Animation features in browsers that do not support it natively. The polyfill
|
| 15 | falls back to the native implementation when one is available.
|
| 16 |
|
| 17 | Quick start
|
| 18 | -----------
|
| 19 |
|
| 20 | Here'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 |
|
| 44 | Documentation
|
| 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](https://drafts.csswg.org/web-animations/)
|
| 52 |
|
| 53 | We 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 |
|
| 65 | Keep up-to-date
|
| 66 | ---------------
|
| 67 |
|
| 68 | Breaking 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 |
|
| 71 | More 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)
|