Web/API/Animation/commitStyles

This is an experimental technologyCheck 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 AnimationsThe definition of 'commitStyles()' in that specification.	Working Draft

Browser compatibility

Update compatibility data on GitHub

	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.