W3cubDocs

/Web APIs

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>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`setKeyframes`	84	84	63	71	13.1	84	63	60	13.4	14.0	84	13.4