Keyframe Formats
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.
Element.animate()
, KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, KeyframeEffect.KeyframeEffect()
, KeyframeEffect.setKeyframes()
and SharedKeyframeList.SharedKeyframeList()
all accept objects formatted to represent a set of keyframes. There are several options to this format, which are explained below.
Syntax
There are two different ways to format keyframes:
-
An
object
containing key-value pairs consisting of the property to animate and anarray
of values to iterate over.JavaScriptCopy Codeelement.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000);
-
An
array
of objects (keyframes) consisting of properties and values to iterate over. This is the canonical format returned by thegetKeyframes()
method.JavaScriptCopy Codeelement.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000);
With this latter form it is also possible to specify offsets for each keyframe by providing an
offset
value.JavaScriptCopy Codeelement.animate([ { opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000);
Note:
offset
values, if provided, must be between 0.0 and 1.0 and arranged in ascending order.Furthermore, using this form it is also possible to specify easing to apply between keyframes by providing an
easing
value as illustrated below.JavaScriptCopy Codeelement.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000);
In this example, the specified easing only applies from the keyframe where it is specified until the next keyframe. Any
easing
value specified on theoptions
argument, however, applies across a single iteration of the animation — for the entire duration.
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'Keyframe object formats' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | No support | (Yes) | 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 |
See also
- Web Animations API
Element.animate()
KeyframeEffect.KeyframeEffect()
KeyframeEffectReadOnly.KeyframeEffectReadOnly()
-
KeyframeEffect.setKeyframes()
SharedKeyframeList.SharedKeyframeList()
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/web_animations_api/keyframe_formats