KeyframeEffect: setKeyframes() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
The setKeyframes() method of the KeyframeEffect interface replaces the keyframes that make up the affected KeyframeEffect with a new set of keyframes.
Syntax
js
setKeyframes(keyframes)
Parameters
Return value
None (undefined).
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
js
// 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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setKeyframes
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support