W3cubDocs

/Web APIs

KeyframeEffect: setKeyframes() method

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

Browser compatibility

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

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/setKeyframes