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 which can be shared across multiple KeyframeEffect
objects.
Syntax
var sharedKeyframeSet = new sharedKeyframeList(keyframes);
Parameters
keyframes
-
An object representing a set of keyframes.
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.element.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 thegetKeyframes()
method.element.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.element.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000);
Note:
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.element.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 a single iteration of the animation — for the entire duration.
-
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 |