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()
constructor of the Web Animations API returns a new KeyframeEffectReadOnly
object instance, and also allows you to clone an existing keyframe effect object instance.
var keyframes = new keyframeEffectReadOnly(element, keyframeSet, keyframeOptions); var keyframes = new keyframeEffectReadOnly(sourceKeyFrames);
The first type of constructor (see above) creates a completely new KeyframeEffectReadOnly
object instance. Its parameters are:
null
.null
.Object
containing one or more of the following:
delay
Optional
direction
Optional
normal
), backwards (reverse
), switches direction after each iteration (alternate
), or runs backwards and switches direction after each iteration (alternate-reverse
). Defaults to "normal"
.duration
Optional
easing
Optional
"linear"
, "ease"
, "ease-in"
, "ease-out"
, and "ease-in-out"
, or a custom "cubic-bezier"
value like "cubic-bezier(0.42, 0, 0.58, 1)"
. Defaults to "linear"
.endDelay
Optional
fill
Optional
"backwards"
), retained after the animation has completed playing ("forwards"
), or both
. Defaults to "none"
.iterationStart
Optional
iterations
Optional
1
, and can also take a value of Infinity
to make it repeat for as long as the element exists.The following options are currently not shipped anywhere, but will be added in the near future:
composite
iterationComposite
spacing
The second type of constructor (see above) creates a clone of an existing KeyframeEffectReadOnly
object instance. Its parameter is as follows:
KeyframeEffectReadOnly
object that you want to clone.Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'KeyframeEffectReadOnly.keyframeEffectReadOnly()' in that specification. | Working Draft | Editor's draft. |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes) | No support | (Yes) | No support | No support | No support |
composite , iterationComposite , and spacing options | No support | No support | No support | No support | No support | No support |
Clone constructor (2nd type) | (Yes) | No support | No support[1] | No support | No support | No support |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | 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 |
Clone constructor (2nd type) | (Yes) | (Yes) | (Yes) | No support[1] | No support | No support | No support |
[1] Only enabled in Firefox 52 Nightly and Dev edition. Turned off in Beta/release.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffectReadOnly/KeyframeEffectReadOnly