Animation.commitStyles()

Experimental: 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
Web Animations Level 2 (Web Animations 2) # dom-animation-commitstyles

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`commitStyles`	84	84	75	No	70	13.1	No	84	79	60	13.4	14.0