@@ -35,7 +35,7 @@ effect.
3535 <div class="pulse" style="width:150px;">Hello world!</div>
3636 <script>
3737 var elem = document.querySelector('.pulse');
38- var player = elem.animate([
38+ var animation = elem.animate([
3939 {opacity: 0.5, transform: "scale(0.5)"},
4040 {opacity: 1.0, transform: "scale(1)"}
4141 ], {
@@ -53,7 +53,7 @@ Native Fallback
5353---------------
5454
5555When 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
5757features.
5858
5959Different Build Targets
@@ -82,18 +82,18 @@ interpolation/decomposition.
8282| ------------------------| :--------------:| :-------------------:| :------------------------:|
8383| Size (gzipped) | 12.5kb | 14kb | 10.5kb |
8484| Element.animate | ✔ | ✔ | ✔ |
85- | Timing input (easings, duration, fillMode, etc.) for animations | ✔ | ✔ | ✔ |
85+ | Timing input (easings, duration, fillMode, etc.) for animation effects | ✔ | ✔ | ✔ |
8686| Playback control | ✔ | ✔ | ✔ |
8787| Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔ |
88- | Support for Animating other CSS properties| ✔ | ✔ | 🚫 |
88+ | Support for animating other CSS properties| ✔ | ✔ | 🚫 |
8989| Matrix fallback for transform animations | ✔ | ✔ | 🚫 |
90- | Animation constructor | 🚫 | ✔ | ✔ |
91- | Simple Groups | 🚫 | ✔ | ✔ |
90+ | KeyframeEffect constructor | 🚫 | ✔ | ✔ |
91+ | Simple GroupEffects & SequenceEffects | 🚫 | ✔ | ✔ |
9292| Custom Effects | 🚫 | ✔ | ✔ |
9393| Timing input (easings, duration, fillMode, etc.) for groups</div >| 🚫 | 🚫\* | 🚫 |
9494| Additive animation | 🚫 | 🚫\* | 🚫 |
9595| Motion path | 🚫\* | 🚫\* | 🚫 |
96- | Modifiable animation timing| 🚫 | 🚫\* | 🚫\* |
96+ | Modifiable keyframe effect timing| 🚫 | 🚫\* | 🚫\* |
9797| Modifiable group timing | 🚫 | 🚫\* | 🚫\* |
9898| Usable inline style\*\* | ✔ | ✔ | 🚫 |
9999
@@ -124,11 +124,11 @@ The polyfill will automatically detect the correctly prefixed name to use when
124124writing animated properties back to the platform. Where possible, the polyfill
125125will only accept unprefixed versions of experimental features. For example:
126126
127- var animation = new Animation (elem, {"transform": "translate(100px, 100px)"}, 2000);
127+ var effect = new KeyframeEffect (elem, {"transform": "translate(100px, 100px)"}, 2000);
128128
129129will work in all browsers that implement a conforming version of transform, but
130130
131- var animation = new Animation (elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
131+ var effect = new KeyframeEffect (elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
132132
133133will not work anywhere.
134134
@@ -150,7 +150,7 @@ Breaking changes
150150----------------
151151
152152When 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
154154old version, deprecated, for three months, and ensure that there are
155155console warnings to indicate that a change is pending. After three
156156months, the old version of the API surface (e.g. the old version of a
0 commit comments