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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`commitStyles` Experimental	Chrome No support No Notes No support No Notes Notes Currently Chrome Canary only	Edge No support No	Firefox Full support 75	IE No support No	Opera No support No	Safari Full support 13.1	WebView Android No support No	Chrome Android No support No Notes No support No Notes Notes Currently Chrome Canary only	Firefox Android No support No	Opera Android No support No	Safari 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.