KeyframeEffect.setKeyframes()
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.More information about a keyframe object's format.
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 |
|---|
| Web Animations # dom-keyframeeffect-setkeyframes |
Browser compatibility
BCD tables only load in the browser