This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The KeyframeEffect()
constructor of the Web Animations API returns a new
object instance, and also allows you to clone an existing keyframe effect object instance.KeyframeEffect
var keyframes = new KeyframeEffect(element, keyframeSet, keyframeOptions); var keyframes = new KeyframeEffect(sourceKeyFrames);
The first type of constructor (see above) creates a completely new KeyframeEffect
object instance. Its parameters are:
null
.null
.Either an integer representing the animation's duration (in milliseconds), or an 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.composite
iterationComposite
The second type of constructor (see above) creates a clone of an existing KeyframeEffect
object instance. Its parameter is as follows:
KeyframeEffect
object that you want to clone.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 );
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'keyframeEffect()' in that specification. | Working Draft | Editor's draft. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | ? | 63 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | ? | 63 | No | No | Yes |
© 2005–2018 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/KeyframeEffect/KeyframeEffect