Animation.reverse()

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The Animation.reverse() method of the Animation Interface reverses the playback direction, meaning the animation ends at its beginning. If called on an unplayed animation, the whole animation is played backwards. If called on a paused animation, the animation will continue in reverse. 

Syntax

animation.reverse(); 

Parameters

None.

Return value

undefined

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

Specification Status Comment
Web Animations
The definition of 'reverse()' in that specification.
Working Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 39Edge ? Firefox Full support 48
Full support 48
No support 42 — 48
Disabled
Disabled From version 42 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Edge Mobile ? Firefox Android Full support 48
Full support 48
No support 42 — 48
Disabled
Disabled From version 42 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Document Tags and Contributors

Last updated by: fscholz,