Animation.commitStyles()

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

The commitStyles() method of the Web Animations API's Animation interface commits the end styling state of an animation to the element being animated, even after that animation has been removed. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute.

Syntax

animation.commitStyles();

Parameters

None.

Return value

None.

Examples

const divElem = document.querySelector('div');

document.body.addEventListener('mousemove', evt => {
  let anim = divElem.animate(
    { transform: `translate(${ evt.clientX}px, ${evt.clientY}px)` },
    { duration: 500, fill: 'forwards' }
  );

  anim.commitStyles();
});

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
commitStyles
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Partial support 13.4
Notes
Partial support 13.4
Notes
Notes Passes 13/27 web platform tests.
Samsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also