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

No compatibility data found. Please contribute data for "api.Animation.commitStyles" (depth: 1) to the MDN compatibility data repository.

See also