KeyframeEffectReadOnly
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 KeyframeEffectReadOnly
interface of the Web Animations API describes sets of animatable properties and values that can be played using the Animation.Animation()
constructor, and which are inherited by KeyframeEffect
.
Note: The animations created with KeyframeEffectReadOnly
are imutable. To create animations you can change with JavaScript on the fly, try KeyframeEffect
instead.
Constructor
KeyframeEffectReadOnly.KeyframeEffectReadOnly()
- Returns a new
KeyframeEffectReadOnly
object instance.
Properties
This interface inherits some of its methods and properties from its parent AnimationEffectReadOnly
.
KeyframeEffectReadOnly.target
Read only- The element or pseudo-element being animated by this object. This may be
null
for animations that do not target a specific element. AnimationEffectReadOnly.timing
Read only- The
AnimationEffectTimingReadOnly
object associated with the animation containing all the animation's timing values.
Future properties
The following options are currently not shipped anywhere, but will be added in the near future.
KeyframeEffectReadOnly.composite
Read only- The composite operation property for resolving the property value changes between this and other keyframe effects.
KeyframeEffectReadOnly.iterationComposite
Read only- The iteration composite operation for resolving the property value changes of this keyframe effect.
KeyframeEffectReadOnly.spacing
Read only- The temporal spacing of the keyframe effect's iterations
Methods
KeyframeEffectReadOnly.getKeyframes()
Read only- Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
AnimationEffectReadOnly.getComputedTiming()
Read only- Returns the calculated, current timing values for this keyframe effect.
Examples
In the Down the Rabbit Hole (with CSS Animations) example, all of Alice's animations are done with CSS. CSS Animations use KeyframeEffectReadOnly
objects, so you can't tinker with them directly with the Web Animations API. But you can inspect them like so:
// Have a look at the animations on Alice. // Her effect is a KeyframeEffectReadOnly object. document.getElementById("alice").getAnimations()[0].effect; // Inspect her timing object. document.getElementById("alice").getAnimations()[0].effect.timing; // See what her current timing values are right now. // How do they differ from the above? document.getElementById("alice").getAnimations()[0].effect.getComputedTiming();
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'keyframeEffectReadOnly' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support |
composite , iterationComposite , and spacing options |
No support | No support | No support | No support | No support | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support | No support | No support | No support |
composite , iterationComposite , and spacing options |
No support | No support | No support | No support | No support | No support | No support | No support |
See also
- Web Animations API
- Inherits from
AnimationEffectReadOnly
. KeyframeEffect
inherits from it.- Can be played with an
Animation
object.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/keyframeeffectreadonly