| OLD | NEW |
| 1 | 1 |
| 2 Quick Start | 2 Quick Start |
| 3 ----------- | 3 ----------- |
| 4 | 4 |
| 5 To provide native Chrome Web Animation features (`Element.animate` and Playback | 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 | 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`. | 7 proposed Web Animations API, use `web-animations-next.min.js`. |
| 8 | 8 |
| 9 What is Web Animations? | 9 What is Web Animations? |
| 10 ----------------------- | 10 ----------------------- |
| 11 | 11 |
| 12 Web Animations is a new JavaScript API for driving animated content on the web. | 12 Web Animations is a new JavaScript API for driving animated content on the web. |
| 13 By unifying the animation features of SVG and CSS, Web Animations unlocks | 13 By unifying the animation features of SVG and CSS, Web Animations unlocks |
| 14 features previously only usable declaratively, and exposes powerful, | 14 features previously only usable declaratively, and exposes powerful, |
| 15 high-performance animation capabilities to developers. | 15 high-performance animation capabilities to developers. |
| 16 | 16 |
| 17 For more details see the | 17 For more details see the |
| 18 [W3C specification](http://w3c.github.io/web-animations/). | 18 [W3C specification](http://w3c.github.io/web-animations/). |
| 19 | 19 |
| 20 What is the polyfill? | 20 What is the polyfill? |
| 21 --------------------- | 21 --------------------- |
| 22 | 22 |
| 23 The polyfill is a JavaScript implementation of the Web Animations API. It works | 23 The polyfill is a JavaScript implementation of the Web Animations API. It is |
| 24 on modern versions of all major browsers. For more details about browser | 24 supported on modern versions of all major browsers, including: |
| 25 support see <https://www.polymer-project.org/resources/compatibility.html>. | 25 |
| 26 * Chrome |
| 27 * Firefox 27+ |
| 28 * IE10+ (including Edge) |
| 29 * Safari (iOS) 7.1+ |
| 30 * Safari (Mac) 9+ |
| 26 | 31 |
| 27 Getting Started | 32 Getting Started |
| 28 --------------- | 33 --------------- |
| 29 | 34 |
| 30 Here's a simple example of an animation that scales and changes the opacity of | 35 Here's a simple example of an animation that scales and changes the opacity of |
| 31 a `<div>` over 0.5 seconds. The animation alternates producing a pulsing | 36 a `<div>` over 0.5 seconds. The animation alternates producing a pulsing |
| 32 effect. | 37 effect. |
| 33 | 38 |
| 34 <script src="web-animations.min.js"></script> | 39 ```html |
| 35 <div class="pulse" style="width:150px;">Hello world!</div> | 40 <script src="web-animations.min.js"></script> |
| 36 <script> | 41 <div class="pulse" style="width:150px;">Hello world!</div> |
| 37 var elem = document.querySelector('.pulse'); | 42 <script> |
| 38 var animation = elem.animate([ | 43 var elem = document.querySelector('.pulse'); |
| 39 {opacity: 0.5, transform: "scale(0.5)"}, | 44 var animation = elem.animate([ |
| 40 {opacity: 1.0, transform: "scale(1)"} | 45 {opacity: 0.5, transform: "scale(0.5)"}, |
| 41 ], { | 46 {opacity: 1.0, transform: "scale(1)"} |
| 42 direction: 'alternate', | 47 ], { |
| 43 duration: 500, | 48 direction: 'alternate', |
| 44 iterations: Infinity | 49 duration: 500, |
| 45 }); | 50 iterations: Infinity |
| 46 </script> | 51 }); |
| 52 </script> |
| 53 ``` |
| 47 | 54 |
| 48 Web Animations supports off-main-thread animations, and also allows procedural | 55 Web Animations supports off-main-thread animations, and also allows procedural |
| 49 generation of animations and fine-grained control of animation playback. See | 56 generation of animations and fine-grained control of animation playback. See |
| 50 <http://web-animations.github.io> for ideas and inspiration! | 57 <http://web-animations.github.io> for ideas and inspiration - or [web-animations
-codelabs](https://github.com/web-animations/web-animations-codelabs). |
| 51 | 58 |
| 52 Native Fallback | 59 Native Fallback |
| 53 --------------- | 60 --------------- |
| 54 | 61 |
| 55 When the polyfill runs on a browser that implements `Element.animate` and | 62 When the polyfill runs on a browser that implements `Element.animate` and |
| 56 `Animation` Playback Control it will detect and use the underlying native | 63 `Animation` Playback Control it will detect and use the underlying native |
| 57 features. | 64 features. |
| 58 | 65 |
| 59 Different Build Targets | 66 Different Build Targets |
| 60 ----------------------- | 67 ----------------------- |
| (...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 117 inline style modification will be overwritten by animations. | 124 inline style modification will be overwritten by animations. |
| 118 Due to browser constraints inline style modification is not supported on iOS 7 | 125 Due to browser constraints inline style modification is not supported on iOS 7 |
| 119 or Safari 6 (or earlier versions). | 126 or Safari 6 (or earlier versions). |
| 120 | 127 |
| 121 ### Prefix handling | 128 ### Prefix handling |
| 122 | 129 |
| 123 The polyfill will automatically detect the correctly prefixed name to use when | 130 The polyfill will automatically detect the correctly prefixed name to use when |
| 124 writing animated properties back to the platform. Where possible, the polyfill | 131 writing animated properties back to the platform. Where possible, the polyfill |
| 125 will only accept unprefixed versions of experimental features. For example: | 132 will only accept unprefixed versions of experimental features. For example: |
| 126 | 133 |
| 127 var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)
"}, 2000); | 134 ```js |
| 135 var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"},
2000); |
| 136 ``` |
| 128 | 137 |
| 129 will work in all browsers that implement a conforming version of transform, but | 138 will work in all browsers that implement a conforming version of transform, but |
| 130 | 139 |
| 131 var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px
, 100px)"}, 2000); | 140 ```js |
| 141 var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 10
0px)"}, 2000); |
| 142 ``` |
| 132 | 143 |
| 133 will not work anywhere. | 144 will not work anywhere. |
| 134 | 145 |
| 135 API and Specification Feedback | 146 API and Specification Feedback |
| 136 ------------------------------ | 147 ------------------------------ |
| 137 | 148 |
| 138 File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>. | 149 File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>. |
| 139 Alternatively, send an email to <public-fx@w3.org> with subject line | 150 Alternatively, send an email to <public-fx@w3.org> with subject line |
| 140 “[web-animations] … message topic …” | 151 “[web-animations] … message topic …” |
| 141 ([archives](http://lists.w3.org/Archives/Public/public-fx/)). | 152 ([archives](http://lists.w3.org/Archives/Public/public-fx/)). |
| (...skipping 10 matching lines...) Expand all Loading... |
| 152 When we make a potentially breaking change to the polyfill's API | 163 When we make a potentially breaking change to the polyfill's API |
| 153 surface (like a rename) we will, where possible, continue supporting the | 164 surface (like a rename) we will, where possible, continue supporting the |
| 154 old version, deprecated, for three months, and ensure that there are | 165 old version, deprecated, for three months, and ensure that there are |
| 155 console warnings to indicate that a change is pending. After three | 166 console warnings to indicate that a change is pending. After three |
| 156 months, the old version of the API surface (e.g. the old version of a | 167 months, the old version of the API surface (e.g. the old version of a |
| 157 function name) will be removed. *If you see deprecation warnings you | 168 function name) will be removed. *If you see deprecation warnings you |
| 158 can't avoid it by not updating*. | 169 can't avoid it by not updating*. |
| 159 | 170 |
| 160 We also announce anything that isn't a bug fix on | 171 We also announce anything that isn't a bug fix on |
| 161 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru
m/web-animations-changes). | 172 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru
m/web-animations-changes). |
| OLD | NEW |