KeyframeEffect.setKeyframes()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The setKeyframes() method of the KeyframeEffect interface replaces the keyframes that make up the affected KeyframeEffect with a new set of keyframes.

Syntax

existingKeyframeEffect.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

Void.

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 Level 2 (Web Animations 2) # dom-keyframeeffect-setkeyframes

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	No	63	No	71	No	84	84	63	60	No	14.0