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 Animation.finish() method of the Animation Interface seeks to either end of an animation, depending on whether the animation is playing or reversing.





Return Value



An InvalidState error is raised if the player's playback rate is 0 or the animation's playback rate is greater than 0 and the end time of the animation is infinity.


The following example shows how to use the finish() method and catch an InvalidState error.

interfaceElement.addEventListener("mousedown", function() {
  try {
  } catch(e if e instanceof InvalidState) {
    console.log("finish() called on paused or finished animation.");
  } catch(e);
    logMyErrors(e); //pass exception object to error handler

The following example finishes all the animations on a single element, regardless of their direction of playback.

    return animation.finish();


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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 39.0 48 (48) No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support 39.0 48.0 (48) No support No support No support 39.0


See also

Document Tags and Contributors

 Contributors to this page: birtles, jpmedley, chrisdavidmills, rachelnabors, fscholz, teoli, kscarfone
 Last updated by: birtles,