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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setKeyframes |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.