OLD | NEW |
1 | 1 |
2 Quick Start | |
3 ----------- | |
4 | |
5 To provide native Chrome Web Animation features (`Element.animate` and Playback | |
6 Control) in other browsers, use `web-animations.min.js`. To explore all of the | |
7 proposed Web Animations API, use `web-animations-next.min.js`. | |
8 | |
9 What is Web Animations? | 2 What is Web Animations? |
10 ----------------------- | 3 ----------------------- |
11 | 4 |
12 Web Animations is a new JavaScript API for driving animated content on the web. | 5 A new JavaScript API for driving animated content on the web. By unifying |
13 By unifying the animation features of SVG and CSS, Web Animations unlocks | 6 the animation features of SVG and CSS, Web Animations unlocks features |
14 features previously only usable declaratively, and exposes powerful, | 7 previously only usable declaratively, and exposes powerful, high-performance |
15 high-performance animation capabilities to developers. | 8 animation capabilities to developers. |
16 | 9 |
17 For more details see the | 10 What is in this repository? |
18 [W3C specification](http://w3c.github.io/web-animations/). | 11 --------------------------- |
19 | 12 |
20 What is the polyfill? | 13 A JavaScript implementation of the Web Animations API that provides Web |
21 --------------------- | 14 Animation features in browsers that do not support it natively. The polyfill |
| 15 falls back to the native implementation when one is available. |
22 | 16 |
23 The polyfill is a JavaScript implementation of the Web Animations API. It is | 17 Quick start |
24 supported on modern versions of all major browsers, including: | 18 ----------- |
25 | 19 |
26 * Chrome | 20 Here's a simple example of an animation that fades and scales a `<div>`. |
27 * Firefox 27+ | 21 [Try it as a live demo.](http://jsbin.com/yageyezabo/edit?html,js,output) |
28 * IE10+ (including Edge) | |
29 * Safari (iOS) 7.1+ | |
30 * Safari (Mac) 9+ | |
31 | |
32 Getting Started | |
33 --------------- | |
34 | |
35 Here's a simple example of an animation that scales and changes the opacity of | |
36 a `<div>` over 0.5 seconds. The animation alternates producing a pulsing | |
37 effect. | |
38 | 22 |
39 ```html | 23 ```html |
| 24 <!-- Include the polyfill --> |
40 <script src="web-animations.min.js"></script> | 25 <script src="web-animations.min.js"></script> |
41 <div class="pulse" style="width:150px;">Hello world!</div> | 26 |
| 27 <!-- Set up a target to animate --> |
| 28 <div class="pulse" style="width: 150px;">Hello world!</div> |
| 29 |
| 30 <!-- Animate! --> |
42 <script> | 31 <script> |
43 var elem = document.querySelector('.pulse'); | 32 var elem = document.querySelector('.pulse'); |
44 var animation = elem.animate([ | 33 var animation = elem.animate({ |
45 {opacity: 0.5, transform: "scale(0.5)"}, | 34 opacity: [0.5, 1], |
46 {opacity: 1.0, transform: "scale(1)"} | 35 transform: ['scale(0.5)', 'scale(1)'], |
47 ], { | 36 }, { |
48 direction: 'alternate', | 37 direction: 'alternate', |
49 duration: 500, | 38 duration: 500, |
50 iterations: Infinity | 39 iterations: Infinity, |
51 }); | 40 }); |
52 </script> | 41 </script> |
53 ``` | 42 ``` |
54 | 43 |
55 Web Animations supports off-main-thread animations, and also allows procedural | 44 Documentation |
56 generation of animations and fine-grained control of animation playback. See | 45 ------------- |
57 <http://web-animations.github.io> for ideas and inspiration - or [web-animations
-codelabs](https://github.com/web-animations/web-animations-codelabs). | |
58 | 46 |
59 Native Fallback | 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/anima
te) |
| 51 * [W3C specification](http://w3c.github.io/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 |
60 --------------- | 66 --------------- |
61 | 67 |
62 When the polyfill runs on a browser that implements `Element.animate` and | 68 Breaking polyfill changes will be announced on this low-volume mailing list: |
63 `Animation` Playback Control it will detect and use the underlying native | 69 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru
m/web-animations-changes). |
64 features. | |
65 | 70 |
66 Different Build Targets | 71 More info |
67 ----------------------- | 72 --------- |
68 | 73 |
69 ### web-animations.min.js | 74 * [Technical details about the polyfill](/docs/support.md) |
70 | 75 * [Browser support](/docs/support.md#browser-support) |
71 Tracks the Web Animations features that are supported natively in browsers. | 76 * [Fallback to native](/docs/support.md#native-fallback) |
72 Today that means Element.animate and Playback Control in Chrome. If you’re not | 77 * [Feature list](/docs/support.md#features) |
73 sure what features you will need, start with this. | 78 * [Feature deprecation and removal processes](/docs/support.md#process-for-b
reaking-changes) |
74 | 79 * To test experimental API features, try one of the |
75 ### web-animations-next.min.js | 80 [experimental targets](/docs/experimental.md) |
76 | |
77 Contains all of web-animations.min.js plus features that are still undergoing | |
78 discussion or have yet to be implemented natively. | |
79 | |
80 ### web-animations-next-lite.min.js | |
81 | |
82 A cut down version of web-animations-next, it removes several lesser used | |
83 property handlers and some of the larger and less used features such as matrix | |
84 interpolation/decomposition. | |
85 | |
86 ### Build Target Comparison | |
87 | |
88 | | web-animations | web-animations-next | web-animations
-next-lite | | |
89 |------------------------|:--------------:|:-------------------:|:--------------
----------:| | |
90 |Size (gzipped) | 15KB | 18KB | 15KB
| | |
91 |Element.animate | ✔ | ✔ | ✔
| | |
92 |Timing input (easings, duration, fillMode, etc.) for animation effects| ✔ | ✔ |
✔ | | |
93 |Playback control | ✔ | ✔ | ✔
| | |
94 |Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔
| | |
95 |Support for animating other CSS properties| ✔ | ✔ | 🚫
| | |
96 |Matrix fallback for transform animations | ✔ | ✔ | 🚫
| | |
97 |KeyframeEffect constructor | 🚫 | ✔ | ✔
| | |
98 |Simple GroupEffects & SequenceEffects | 🚫 | ✔
| ✔ | | |
99 |Custom Effects | 🚫 | ✔ | ✔
| | |
100 |Timing input (easings, duration, fillMode, etc.) for groups</div>| 🚫 | 🚫\* | 🚫
| | |
101 |Additive animation | 🚫\* | 🚫\* | 🚫
| | |
102 |Motion path | 🚫\* | 🚫\* | 🚫
| | |
103 |Modifiable keyframe effect timing| 🚫 | 🚫\* | 🚫\*
| | |
104 |Modifiable group timing | 🚫 | 🚫\* | 🚫\*
| | |
105 |Usable inline style\*\* | ✔ | ✔ | 🚫
| | |
106 | |
107 \* support is planned for these features. | |
108 \*\* see inline style caveat below. | |
109 | |
110 Caveats | |
111 ------- | |
112 | |
113 Some things won’t ever be faithful to the native implementation due to browser | |
114 and CSS API limitations. These include: | |
115 | |
116 ### Inline Style | |
117 | |
118 Inline style modification is the mechanism used by the polyfill to animate | |
119 properties. Both web-animations and web-animations-next incorporate a module | |
120 that emulates a vanilla inline style object, so that style modification from | |
121 JavaScript can still work in the presence of animations. However, to keep the | |
122 size of web-animations-next-lite as small as possible, the style emulation | |
123 module is not included. When using this version of the polyfill, JavaScript | |
124 inline style modification will be overwritten by animations. | |
125 Due to browser constraints inline style modification is not supported on iOS 7 | |
126 or Safari 6 (or earlier versions). | |
127 | |
128 ### Prefix handling | |
129 | |
130 The polyfill will automatically detect the correctly prefixed name to use when | |
131 writing animated properties back to the platform. Where possible, the polyfill | |
132 will only accept unprefixed versions of experimental features. For example: | |
133 | |
134 ```js | |
135 var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"},
2000); | |
136 ``` | |
137 | |
138 will work in all browsers that implement a conforming version of transform, but | |
139 | |
140 ```js | |
141 var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 10
0px)"}, 2000); | |
142 ``` | |
143 | |
144 will not work anywhere. | |
145 | |
146 API and Specification Feedback | |
147 ------------------------------ | |
148 | |
149 File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>. | |
150 Alternatively, send an email to <public-fx@w3.org> with subject line | |
151 “[web-animations] … message topic …” | |
152 ([archives](http://lists.w3.org/Archives/Public/public-fx/)). | |
153 | |
154 Polyfill Issues | |
155 --------------- | |
156 | |
157 Report any issues with this implementation on GitHub: | |
158 <https://github.com/web-animations/web-animations-next/issues/new>. | |
159 | |
160 Breaking changes | |
161 ---------------- | |
162 | |
163 When we make a potentially breaking change to the polyfill's API | |
164 surface (like a rename) we will, where possible, continue supporting the | |
165 old version, deprecated, for three months, and ensure that there are | |
166 console warnings to indicate that a change is pending. After three | |
167 months, the old version of the API surface (e.g. the old version of a | |
168 function name) will be removed. *If you see deprecation warnings you | |
169 can't avoid it by not updating*. | |
170 | |
171 We also announce anything that isn't a bug fix on | |
172 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru
m/web-animations-changes). | |
OLD | NEW |