Animation.reverse()

Syntax

animation.reverse(); 

Parameters

None.

Returns

Void.

Example

In the Growing/Shrinking Alice Game example, clicking or tapping the bottle causes Alice's growing animation (aliceChange) to play backwards, causing her to get smaller. It is done by setting aliceChange's Animation.playbackRate to -1 like so:

var shrinkAlice = function() {

  // play Alice's animation in reverse
  aliceChange.playbackRate = -1;
  aliceChange.play();
  
  // play the bottle's animation
  drinking.play()

}

But it could also have been done by calling reverse() on aliceChange like so:

var shrinkAlice = function() {

  // play Alice's animation in reverse
  aliceChange.reverse();
  
  // play the bottle's animation
  drinking.play()

}

Specifications

Browser compatibility

See also

• Web Animations API
• AnimationPlayer for other methods and properties you can use to control web page animation.
• AnimationPlayer.pause() to pause an animation.
• AnimationPlayer.play() to move an animation forward.