Direction

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.

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

Browser compatibility

See also

• Web Animations API
• Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly(), and KeyframeEffect.KeyframeEffect() all accept an object of timing properties including this one.
• The value of this property corresponds to the one in AnimationEffectTimingReadOnly (which is the timing object for AnimationEffectReadOnly, KeyframeEffectReadOnly, and KeyframeEffect).
• CSS's animation-direction