SharedKeyframeList.SharedKeyframeList()
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The SharedKeyframeList()
constructor of the SharedKeyframeList
interface creates a new SharedKeyframeList
object that can be shared across multiple KeyframeEffect
objects.
Syntax
var sharedKeyframeSet = new sharedKeyframeList(keyframes);
Parameters
keyframes
-
An object representing a set of keyframes to be contained in the object.
There are two different ways to format keyframes:
-
An
object
containing key-value pairs consisting of the property to animate and anarray
of values to iterate over.JavaScriptCopy Codeelement.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000);
-
An
array
of objects (keyframes) consisting of properties and values to iterate over. This is the canonical format returned by thesetKeyframes()
method.JavaScriptCopy Codeelement.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000);
With this latter form it is also possible to specify offsets for each keyframe by providing an
offset
value.JavaScriptCopy Codeelement.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000);
offset
values, if provided, must be between 0.0 and 1.0 and arranged in ascending order.Furthermore, using this form it is also possible to specify easing to apply between keyframes by providing an
easing
value as illustrated below.JavaScriptCopy Codeelement.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000);
In this example, the specified easing only applies from the keyframe where it is specified until the next keyframe. Any
easing
value specified on theoptions
argument, however, applies across the entire duration of a single iteration of the animation.
-
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'SharedKeyframeList()' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support | No support | No support |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/sharedkeyframelist/sharedkeyframelist