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 March 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
BCD tables only load in the browser