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

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

Issue 1214573003: Fix Polymer licensing issues (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix web-animations-js path Created 5 years, 6 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 -----------------------
(...skipping 17 matching lines...) Expand all
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
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).
OLDNEW
« no previous file with comments | « third_party/web-animations-js/sources/History.md ('k') | third_party/web-animations-js/sources/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698