KeyframeEffect

This article needs a technical review. How you can help.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The KeyframeEffect interface of the Web Animations API lets us create sets of animatable properties and values, called keyframes. These can then be played using the Animation.Animation() constructor.

Constructor

KeyframeEffect.KeyframeEffect()
Returns a new KeframeEffect object instance.

Properties

KeyframeEffect.target
The element or pseudo-element being animated by this object. This may be null for animations that do not target a specific element.
KeyframeEffect.iterationComposite
Gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect.
KeyframeEffect.composite
Gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects.
KeyframeEffect.spacing
Gets and sets the temporal spacing of the keyframe effect's iterations.

Methods

KeyframeEffect.clone()
Returns a new KeyframeEffect object whose members have the same values as this object.
KeyframeEffect.getFrames()
Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
KeyframeEffect.setFrames()
Replaces the set of keyframes that make up this effect.

Examples

In the Follow the White Rabbit example, the KeyframeEffect constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole:

 var rabbitDownKeyframes = new KeyframeEffect( 
    whiteRabbit, // element to animate
    [
      { transform: 'translateY(0%)' }, // keyframe 
      { transform: 'translateY(100%)' } // keyframe
    ], 
    { duration: 3000, fill: 'forwards' } // keyframe options
  );

Specifications

Specification Status Comment
Web Animations
The definition of 'keyframeEffect' in that specification.
Working Draft Editor's draft.

Browser compatibility

Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Document Tags and Contributors

 Contributors to this page: rolfedh, rachelnabors
 Last updated by: rolfedh,