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 ----------------------- |
(...skipping 17 matching lines...) Expand all Loading... |
28 --------------- | 28 --------------- |
29 | 29 |
30 Here's a simple example of an animation that scales and changes the opacity of | 30 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 | 31 a `<div>` over 0.5 seconds. The animation alternates producing a pulsing |
32 effect. | 32 effect. |
33 | 33 |
34 <script src="web-animations.min.js"></script> | 34 <script src="web-animations.min.js"></script> |
35 <div class="pulse" style="width:150px;">Hello world!</div> | 35 <div class="pulse" style="width:150px;">Hello world!</div> |
36 <script> | 36 <script> |
37 var elem = document.querySelector('.pulse'); | 37 var elem = document.querySelector('.pulse'); |
38 var player = elem.animate([ | 38 var animation = elem.animate([ |
39 {opacity: 0.5, transform: "scale(0.5)"}, | 39 {opacity: 0.5, transform: "scale(0.5)"}, |
40 {opacity: 1.0, transform: "scale(1)"} | 40 {opacity: 1.0, transform: "scale(1)"} |
41 ], { | 41 ], { |
42 direction: 'alternate', | 42 direction: 'alternate', |
43 duration: 500, | 43 duration: 500, |
44 iterations: Infinity | 44 iterations: Infinity |
45 }); | 45 }); |
46 </script> | 46 </script> |
47 | 47 |
48 Web Animations supports off-main-thread animations, and also allows procedural | 48 Web Animations supports off-main-thread animations, and also allows procedural |
49 generation of animations and fine-grained control of animation playback. See | 49 generation of animations and fine-grained control of animation playback. See |
50 <http://web-animations.github.io> for ideas and inspiration! | 50 <http://web-animations.github.io> for ideas and inspiration! |
51 | 51 |
52 Native Fallback | 52 Native Fallback |
53 --------------- | 53 --------------- |
54 | 54 |
55 When the polyfill runs on a browser that implements Element.animate and | 55 When the polyfill runs on a browser that implements `Element.animate` and |
56 AnimationPlayer Playback Control it will detect and use the underlying native | 56 `Animation` Playback Control it will detect and use the underlying native |
57 features. | 57 features. |
58 | 58 |
59 Different Build Targets | 59 Different Build Targets |
60 ----------------------- | 60 ----------------------- |
61 | 61 |
62 ### web-animations.min.js | 62 ### web-animations.min.js |
63 | 63 |
64 Tracks the Web Animations features that are supported natively in browsers. | 64 Tracks the Web Animations features that are supported natively in browsers. |
65 Today that means Element.animate and Playback Control in Chrome. If you’re not | 65 Today that means Element.animate and Playback Control in Chrome. If you’re not |
66 sure what features you will need, start with this. | 66 sure what features you will need, start with this. |
67 | 67 |
68 ### web-animations-next.min.js | 68 ### web-animations-next.min.js |
69 | 69 |
70 Contains all of web-animations.min.js plus features that are still undergoing | 70 Contains all of web-animations.min.js plus features that are still undergoing |
71 discussion or have yet to be implemented natively. | 71 discussion or have yet to be implemented natively. |
72 | 72 |
73 ### web-animations-next-lite.min.js | 73 ### web-animations-next-lite.min.js |
74 | 74 |
75 A cut down version of web-animations-next, it removes several lesser used | 75 A cut down version of web-animations-next, it removes several lesser used |
76 property handlers and some of the larger and less used features such as matrix | 76 property handlers and some of the larger and less used features such as matrix |
77 interpolation/decomposition. | 77 interpolation/decomposition. |
78 | 78 |
79 ### Build Target Comparison | 79 ### Build Target Comparison |
80 | 80 |
81 | | web-animations | web-animations-next | web-animations
-next-lite | | 81 | | web-animations | web-animations-next | web-animations
-next-lite | |
82 |------------------------|:--------------:|:-------------------:|:--------------
----------:| | 82 |------------------------|:--------------:|:-------------------:|:--------------
----------:| |
83 |Size (gzipped) | 12.5kb | 14kb | 10.5kb
| | 83 |Size (gzipped) | 12.5kb | 14kb | 10.5kb
| |
84 |Element.animate | ✔ | ✔ | ✔
| | 84 |Element.animate | ✔ | ✔ | ✔
| |
85 |Timing input (easings, duration, fillMode, etc.) for animations| ✔ | ✔ | ✔
| | 85 |Timing input (easings, duration, fillMode, etc.) for animation effects| ✔ | ✔ |
✔ | |
86 |Playback control | ✔ | ✔ | ✔
| | 86 |Playback control | ✔ | ✔ | ✔
| |
87 |Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔
| | 87 |Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔
| |
88 |Support for Animating other CSS properties| ✔ | ✔ | 🚫
| | 88 |Support for animating other CSS properties| ✔ | ✔ | 🚫
| |
89 |Matrix fallback for transform animations | ✔ | ✔ | 🚫
| | 89 |Matrix fallback for transform animations | ✔ | ✔ | 🚫
| |
90 |Animation constructor | 🚫 | ✔ | ✔
| | 90 |KeyframeEffect constructor | 🚫 | ✔ | ✔
| |
91 |Simple Groups | 🚫 | ✔ | ✔
| | 91 |Simple GroupEffects & SequenceEffects | 🚫 | ✔
| ✔ | |
92 |Custom Effects | 🚫 | ✔ | ✔
| | 92 |Custom Effects | 🚫 | ✔ | ✔
| |
93 |Timing input (easings, duration, fillMode, etc.) for groups</div>| 🚫 | 🚫\* | 🚫
| | 93 |Timing input (easings, duration, fillMode, etc.) for groups</div>| 🚫 | 🚫\* | 🚫
| |
94 |Additive animation | 🚫 | 🚫\* | 🚫
| | 94 |Additive animation | 🚫\* | 🚫\* | 🚫
| |
95 |Motion path | 🚫\* | 🚫\* | 🚫
| | 95 |Motion path | 🚫\* | 🚫\* | 🚫
| |
96 |Modifiable animation timing| 🚫 | 🚫\* | 🚫\*
| | 96 |Modifiable keyframe effect timing| 🚫 | 🚫\* | 🚫\*
| |
97 |Modifiable group timing | 🚫 | 🚫\* | 🚫\*
| | 97 |Modifiable group timing | 🚫 | 🚫\* | 🚫\*
| |
98 |Usable inline style\*\* | ✔ | ✔ | 🚫
| | 98 |Usable inline style\*\* | ✔ | ✔ | 🚫
| |
99 | 99 |
100 \* support is planned for these features. | 100 \* support is planned for these features. |
101 \*\* see inline style caveat below. | 101 \*\* see inline style caveat below. |
102 | 102 |
103 Caveats | 103 Caveats |
104 ------- | 104 ------- |
105 | 105 |
106 Some things won’t ever be faithful to the native implementation due to browser | 106 Some things won’t ever be faithful to the native implementation due to browser |
(...skipping 10 matching lines...) Expand all Loading... |
117 inline style modification will be overwritten by animations. | 117 inline style modification will be overwritten by animations. |
118 Due to browser constraints inline style modification is not supported on iOS 7 | 118 Due to browser constraints inline style modification is not supported on iOS 7 |
119 or Safari 6 (or earlier versions). | 119 or Safari 6 (or earlier versions). |
120 | 120 |
121 ### Prefix handling | 121 ### Prefix handling |
122 | 122 |
123 The polyfill will automatically detect the correctly prefixed name to use when | 123 The polyfill will automatically detect the correctly prefixed name to use when |
124 writing animated properties back to the platform. Where possible, the polyfill | 124 writing animated properties back to the platform. Where possible, the polyfill |
125 will only accept unprefixed versions of experimental features. For example: | 125 will only accept unprefixed versions of experimental features. For example: |
126 | 126 |
127 var animation = new Animation(elem, {"transform": "translate(100px, 100px)"}
, 2000); | 127 var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)
"}, 2000); |
128 | 128 |
129 will work in all browsers that implement a conforming version of transform, but | 129 will work in all browsers that implement a conforming version of transform, but |
130 | 130 |
131 var animation = new Animation(elem, {"-webkit-transform": "translate(100px,
100px)"}, 2000); | 131 var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px
, 100px)"}, 2000); |
132 | 132 |
133 will not work anywhere. | 133 will not work anywhere. |
134 | 134 |
135 API and Specification Feedback | 135 API and Specification Feedback |
136 ------------------------------ | 136 ------------------------------ |
137 | 137 |
138 File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>. | 138 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 | 139 Alternatively, send an email to <public-fx@w3.org> with subject line |
140 “[web-animations] … message topic …” | 140 “[web-animations] … message topic …” |
141 ([archives](http://lists.w3.org/Archives/Public/public-fx/)). | 141 ([archives](http://lists.w3.org/Archives/Public/public-fx/)). |
142 | 142 |
143 Polyfill Issues | 143 Polyfill Issues |
144 --------------- | 144 --------------- |
145 | 145 |
146 Report any issues with this implementation on GitHub: | 146 Report any issues with this implementation on GitHub: |
147 <https://github.com/web-animations/web-animations-next/issues/new>. | 147 <https://github.com/web-animations/web-animations-next/issues/new>. |
148 | 148 |
149 Breaking changes | 149 Breaking changes |
150 ---------------- | 150 ---------------- |
151 | 151 |
152 When we make a potentially breaking change to the polyfill's API | 152 When we make a potentially breaking change to the polyfill's API |
153 surface (like a rename) where possible we will continue supporting the | 153 surface (like a rename) we will, where possible, continue supporting the |
154 old version, deprecated, for three months, and ensure that there are | 154 old version, deprecated, for three months, and ensure that there are |
155 console warnings to indicate that a change is pending. After three | 155 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 | 156 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 | 157 function name) will be removed. *If you see deprecation warnings you |
158 can't avoid it by not updating*. | 158 can't avoid it by not updating*. |
159 | 159 |
160 We also announce anything that isn't a bug fix on | 160 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). | 161 [web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!foru
m/web-animations-changes). |
OLD | NEW |