OLD | NEW |
(Empty) | |
| 1 |
| 2 Experimental build targets |
| 3 -------------------------- |
| 4 |
| 5 Most people should use the basic polyfill in `web-animations.min.js`. This |
| 6 tracks the Web Animations features that are supported natively in browsers. |
| 7 However, we also provide two additional build targets that contain experimental |
| 8 features. |
| 9 |
| 10 ### web-animations-next.min.js |
| 11 |
| 12 Contains all of web-animations.min.js plus features that are still undergoing |
| 13 discussion or have yet to be implemented natively. |
| 14 |
| 15 ### web-animations-next-lite.min.js |
| 16 |
| 17 A cut down version of web-animations-next, it removes several lesser used |
| 18 property handlers and some of the larger and less used features such as matrix |
| 19 interpolation/decomposition. |
| 20 |
| 21 Build target comparison |
| 22 ----------------------- |
| 23 |
| 24 | | web-animations | web-animations-next | web-animations
-next-lite | |
| 25 |------------------------|:--------------:|:-------------------:|:--------------
----------:| |
| 26 |Size (gzipped) | 15KB | 19KB | 15KB
| |
| 27 |Element.animate | ✔ | ✔ | ✔
| |
| 28 |Timing input (easings, duration, fillMode, etc.) for animation effects| ✔ | ✔ |
✔ | |
| 29 |Playback control | ✔ | ✔ | ✔
| |
| 30 |Support for animating lengths, transforms and opacity| ✔ | ✔ | ✔
| |
| 31 |Support for animating other CSS properties| ✔ | ✔ | 🚫
| |
| 32 |Matrix fallback for transform animations | ✔ | ✔ | 🚫
| |
| 33 |KeyframeEffect constructor | 🚫 | ✔ | ✔
| |
| 34 |Simple GroupEffects & SequenceEffects | 🚫 | ✔
| ✔ | |
| 35 |Custom Effects | 🚫 | ✔ | ✔
| |
| 36 |Timing input (easings, duration, fillMode, etc.) for groups</div>| 🚫 | 🚫\* | 🚫
| |
| 37 |Additive animation | 🚫\* | 🚫\* | 🚫
| |
| 38 |Motion path | 🚫\* | 🚫\* | 🚫
| |
| 39 |Modifiable keyframe effect timing| 🚫 | 🚫\* | 🚫\*
| |
| 40 |Modifiable group timing | 🚫 | 🚫\* | 🚫\*
| |
| 41 |Usable inline style\*\* | ✔ | ✔ | 🚫
| |
| 42 |
| 43 \* support is planned for these features. |
| 44 \*\* see inline style caveat below. |
| 45 |
| 46 Caveat: Inline style |
| 47 -------------------- |
| 48 |
| 49 Inline style modification is the mechanism used by the polyfill to animate |
| 50 properties. Both web-animations and web-animations-next incorporate a module |
| 51 that emulates a vanilla inline style object, so that style modification from |
| 52 JavaScript can still work in the presence of animations. However, to keep the |
| 53 size of web-animations-next-lite as small as possible, the style emulation |
| 54 module is not included. When using this version of the polyfill, JavaScript |
| 55 inline style modification will be overwritten by animations. |
| 56 Due to browser constraints inline style modification is not supported on iOS 7 |
| 57 or Safari 6 (or earlier versions). |
| 58 |
OLD | NEW |