{{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
This interface inherits some of its methods and properties from its parent, {{domxref("KeyframeEffectReadOnly")}}, and its grandparent {{domxref("AnimationEffectReadOnly")}}.
- {{domxref("AnimationEffectReadOnly.timing")}}
- The {{domxref("AnimationEffectTimingReadOnly")}} object associated with the animation containing all the animation's timing values.
- {{domxref("KeyframeEffectReadOnly.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.
Future properties
The following options are currently not shipped anywhere, but will be added in the near future.
- {{domxref("KeyframeEffectReadOnly.iterationComposite")}}
- Gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect.
- {{domxref("KeyframeEffectReadOnly.composite")}}
- Gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects.
- {{domxref("KeyframeEffectReadOnly.spacing")}}
- Gets and sets the temporal spacing of the keyframe effect's iterations.
Methods
- {{domxref("KeyframeEffectReadOnly.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.
- {{domxref("AnimationEffectReadOnly.getComputedTiming()")}}
- Returns the calculated, current timing values for this keyframe 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')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Web Animations API
- Inherits from {{domxref("KeyframeEffectReadOnly")}} and its parent {{domxref("AnimationEffectReadOnly")}} .
- {{domxref("Animation")}}