Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(38)

Side by Side Diff: third_party/web-animations-js/sources/README.md

Issue 1901343004: [Polymer] update third_party polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: new pull Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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).
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698