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

keyframes

A keyframe object or null. If set to null, the keyframes are replaced with a sequence of empty keyframes.

More information about a keyframe object's format.

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setKeyframes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also