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 setKeyframes()
method of the KeyframeEffect
interface replaces the keyframes that make up the affected KeyframeEffect
with a new set of keyframes.
Syntax
existingKeyframeEffect.setKeyframes(keyframes);
Parameters
- keyframes
- A keyframe object or
null
. If set tonull
, the keyframes are replaced with a sequence of empty 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.
-
Return value
Void.
Exceptions
Exception | Explanation |
---|---|
TypeError |
One or more of the frames were not of the correct type of object, the keyframes were not loosely sorted by offset, or a keyframe existed with an offset of less than 0 or more than 1. |
Note: If the keyframes cannot be processed or are malformed, the KeyframeEffect
's keyframes are not modified.
Examples
// passing an array of keyframe objects existingKeyframeEffect.setKeyframes( [ { color: 'blue' }, { color: 'green', left: '10px' } ] ); // passing an object with arrays for values existingKeyframeEffect.setKeyframes( { color: ['blue', 'green'], left: [ '0', '10px'] } ); // passing a single-member object existingKeyframeEffect.setKeyframes( { color: 'blue' } );
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'KeyframeEffect.setKeyframes()' 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 |