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

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

// 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