Web/API/KeyframeEffect/getKeyframes

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.

The getKeyframes() method of a KeyframeEffect returns an Array of the computed keyframes that make up this animation along with their computed offsets.

Syntax

var keyframes = keyframeEffect.getKeyframes();

Parameters

None.

Return value

Returns a sequence of objects with the following format:

property value pairs: As many property value pairs as are contained in each keyframe of the animation.
offset: The offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. This is equivalent to specifying start and end states in percentages in CSS stylesheets using @keyframes. This will be null if the keyframe is automatically spaced using KeyframeEffect.spacing.
computedOffset: The computed offset for this keyframe, calculated when the list of computed keyframes was produced according to KeyframeEffect.spacing. Unlike offset, above, the computedOffset is never null.
easing: The timing function used from this keyframe until the next keyframe in the series.
composite: The KeyframeEffect.composite operation used to combine the values specified in this keyframe with the underlying value. This will be absent if the composite operation specified on the effect is being used.

Examples

In the Red Queen Race example, we can inspect Alice and the RedQueen's animation to see its individual keyframes like so:

// Return the array of keyframes

redQueen_alice.effect.getKeyframes();

Specifications

Specification	Status	Comment
Web AnimationsThe definition of 'KeyframeEffect.getKeyframes()' in that specification.	Working Draft	Editor's draft.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getKeyframes`	Chrome ?	Edge ?	Firefox Full support 63	IE No support No	Opera No support No	Safari No support No	WebView Android ?	Chrome Android ?	Firefox Android Full support 63	Opera Android No support No	Safari iOS No support No	Samsung Internet Android ?

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown