Added support for animating SVG related properties:
Fixed display and other animation properties being animated.
Throw InvalidStateError when calling play() on reversed infinite animation.
Extended cubic-bezier timing function domain from [0, 1] to (-Infinity, Infinity).
Fixed timing model to handle corner cases involving Infinity and 0 correctly.
Improved performance of starting and updating individual animations.
Deprecated invalid timing inputs as they will soon throw TypeErrors in native browsers.
For example, this is deprecated and will eventually throw a TypeError:
element.animate([], { duration: -1, iterationStart: -1, iterations: -1, easing: 'garbage string', });
Fixed polyfill crash in browsers based on Chromium 36 to 46.
Deprecated the use of hyphens in property names.
For example, this is deprecated:
element.animate([{'font-size': '0px'}, {'font-size': '10px'}]);
and this should be used instead:
element.animate([{fontSize: '0px'}, {fontSize: '10px'}]);
Added arbitrary easing capitalisation.
Added "id" effect option. (http://w3c.github.io/web-animations/#dom-keyframeanimationoptions-id)
Added "oncancel" event handler.
Added value list keyframe syntax.
As as alternative to:
element.animate([{color: 'red'}, {color: 'green'}, {color: 'blue'}]);
you can now use:
element.animate({color: ['red', 'green', 'blue']});
Fixed easing TypeError in FireFox Nightly when using groups.
Fixed delayed animation updates on Safari and Firefox
Fixed infinite recursion when setting onfinish to null.
Date.now()
instead of performace.now()
for mobile Safari.Add Animation.timeline getter
Add AnimationEffect.parent getter
Make AnimationEffectTiming (returned by AnimationEffect.timing) attributes mutable
Expose the Animation constructor
Change custom effects from AnimationEffects to onsample functions. Custom effects should now be created by setting the onsample attribute of a KeyframeEffect.
For example, this is deprecated:
var myEffect = new KeyframeEffect( element, function(timeFraction, target, effect) { target.style.opacity = timeFraction; }, 1000); var myAnimation = document.timeline.play(myEffect);
and this should be used insead:
var myEffect = new KeyframeEffect(element, [], 1000); effect.onsample = function(timeFraction, effect, animation) { effect.target.style.opacity = timeFraction; }; var myAnimation = document.timeline.play(myEffect);
timeline.play()
to be called with no argumentsweb-animations-next
and web-animations-next-lite
were executed on top of a native element.animate
.Deprecated AnimationTiming.playbackRate
.
For example, this is no longer supported:
var player = element.animate( keyframes, {duration: 1000, playbackRate: 2});
Use AnimationPlayer.playbackRate
instead:
var player = element.animate( keyframes, {duration: 1000}); player.playbackRate = 2;
If you have any feedback on this change, please start a discussion on the public-fx mailing list: http://lists.w3.org/Archives/Public/public-fx/
Or file an issue against the specification on GitHub: https://github.com/w3c/web-animations/issues/new
play()
and reverse()
should not force a start timesrequestAnimationFrame
ids and cancelAnimationFrame
The web-animations-js hackers are pleased to announce the release of a new codebase for the Web Animations Polyfill: https://github.com/web-animations/web-animations-js
The previous polyfill has been moved to: https://github.com/web-animations/web-animations-js-legacy
The new codebase is focused on code-size -- our smallest target is now only 33kb or 11kb after gzip.
We've implemented native fallback. If the target browser provides Web Animations features natively, the Polyfill will use them.
We now provide three different build targets:
web-animations.min.js
- Tracks the Web Animations features that are supported natively in browsers. Today that means Element.animate and Playback Control in Chrome. If you’re not sure what features you will need, start with this.
web-animations-next.min.js
- All of web-animations.min.js plus features that are still undergoing discussion or have yet to be implemented natively.
web-animations-next-lite.min.js
- A cut down version of web-animations-next, removes several lesser used property handlers and some of the larger and less used features such as matrix interpolation/decomposition.
Not all features of the previous polyfill have been ported to the new codebase; most notably mutation of Animations and Groups and Additive Animations are not yet supported. These features are still important and will be implemented in the coming weeks.