This article needs a technical review. How you can help.
This article needs an editorial review. How you can help.
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.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 thesetKeyframes()
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);
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 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 |