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

Unified 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 side-by-side diff with in-line comments
Download patch
Index: third_party/web-animations-js/sources/README.md
diff --git a/third_party/web-animations-js/sources/README.md b/third_party/web-animations-js/sources/README.md
index fa3f972e0192a680d45d14fc8b012f80e62d2b47..c61df59836bd455b49f023b1973ef0a778bcf044 100644
--- a/third_party/web-animations-js/sources/README.md
+++ b/third_party/web-animations-js/sources/README.md
@@ -20,9 +20,14 @@ For more details see the
What is the polyfill?
---------------------
-The polyfill is a JavaScript implementation of the Web Animations API. It works
-on modern versions of all major browsers. For more details about browser
-support see <https://www.polymer-project.org/resources/compatibility.html>.
+The polyfill is a JavaScript implementation of the Web Animations API. It is
+supported on modern versions of all major browsers, including:
+
+* Chrome
+* Firefox 27+
+* IE10+ (including Edge)
+* Safari (iOS) 7.1+
+* Safari (Mac) 9+
Getting Started
---------------
@@ -31,23 +36,25 @@ Here's a simple example of an animation that scales and changes the opacity of
a `<div>` over 0.5 seconds. The animation alternates producing a pulsing
effect.
- <script src="web-animations.min.js"></script>
- <div class="pulse" style="width:150px;">Hello world!</div>
- <script>
- var elem = document.querySelector('.pulse');
- var animation = elem.animate([
- {opacity: 0.5, transform: "scale(0.5)"},
- {opacity: 1.0, transform: "scale(1)"}
- ], {
- direction: 'alternate',
- duration: 500,
- iterations: Infinity
- });
- </script>
+```html
+<script src="web-animations.min.js"></script>
+<div class="pulse" style="width:150px;">Hello world!</div>
+<script>
+ var elem = document.querySelector('.pulse');
+ var animation = elem.animate([
+ {opacity: 0.5, transform: "scale(0.5)"},
+ {opacity: 1.0, transform: "scale(1)"}
+ ], {
+ direction: 'alternate',
+ duration: 500,
+ iterations: Infinity
+ });
+</script>
+```
Web Animations supports off-main-thread animations, and also allows procedural
generation of animations and fine-grained control of animation playback. See
-<http://web-animations.github.io> for ideas and inspiration!
+<http://web-animations.github.io> for ideas and inspiration - or [web-animations-codelabs](https://github.com/web-animations/web-animations-codelabs).
Native Fallback
---------------
@@ -124,11 +131,15 @@ The polyfill will automatically detect the correctly prefixed name to use when
writing animated properties back to the platform. Where possible, the polyfill
will only accept unprefixed versions of experimental features. For example:
- var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"}, 2000);
+```js
+var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"}, 2000);
+```
will work in all browsers that implement a conforming version of transform, but
- var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
+```js
+var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
+```
will not work anywhere.

Powered by Google App Engine
This is Rietveld 408576698