{{SeeCompatTable}}{{ APIRef("Web Animations API") }}
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 {{domxref("Animation.Animation()")}} constructor.
Constructor
- {{domxref("KeyframeEffect.KeyframeEffect()")}}
- Returns a new
KeyframeEffect
object instance.
Properties
- {{domxref("KeyframeEffect.target")}}
- Gets and sets the element or pseudo-element being animated by this object. This may be
null
for animations that do not target a specific element. - {{domxref("KeyframeEffect.iterationComposite")}}
- Gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect.
- {{domxref("KeyframeEffect.composite")}}
- Gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects.
- {{domxref("KeyframeEffect.spacing")}}
- Gets and sets the temporal spacing of the keyframe effect's iterations.
Methods
- {{domxref("KeyframeEffect.getKeyframes()")}}
- Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
- {{domxref("KeyframeEffect.setKeyframes()")}}
- 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 |
---|---|---|
{{SpecName('Web Animations', '#the-keyframeeffect-interfaces', 'keyframeEffect' )}} | {{Spec2('Web Animations')}} | Editor's draft. |
Browser compatibility
{{CompatibilityTable}}
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatGeckoDesktop(47)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Web Animations API
- {{domxref("Animation")}}