Direction
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 direction
property of the Web Animations API represents the direction of the animation's playback along its timeline and its behavior after completing each iteration.
Note: Element.animate()
, KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, and KeyframeEffect.KeyframeEffect()
all accept an object of timing properties including direction.
The value of direction
corresponds directly to AnimationEffectTimingReadOnly.direction
in timing
objects returned by AnimationEffectReadOnly
, KeyframeEffectReadOnly
, and KeyframeEffect
.
Syntax
// Cause the animation to alternate running forwards and backwards on each loop var timingProperties = { direction: "alternate" }
Value
A DOMString
representing the direction of the animation's playback. It can take one of the following values (defaults to normal
):
- normal
- The animation runs forwards, from beginning to end, in the way we experience the flow of time.
- reverse
- The animation runs backwards, or "rewinds."
- alternate
- The animation switches direction after each iteration, going from forwards to backwards then back again every two iterations.
- alternate-reverse
- The reverse of the above: the animation switches direction after each iteration, going from backwards to forwards then back again every two iterations.
Examples
In the Forgotten Key example, Alice waves her arm up and down by passing her an alternate
value for her direction
property:
// Get Alice's arm, and wave it up and down document.getElementById("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: Infinity, direction: 'alternate', duration: 600 });
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'direction' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | 48 (48) | No support | (Yes) | 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()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
, andKeyframeEffect.KeyframeEffect()
all accept an object of timing properties including this one.- The value of this property corresponds to the one in
AnimationEffectTimingReadOnly
(which is thetiming
object forAnimationEffectReadOnly
,KeyframeEffectReadOnly
, andKeyframeEffect
). - CSS's
animation-direction
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/animationeffecttimingproperties/direction