ThecommitStyles() method of theWeb Animations API'sAnimation interface writes thecomputed values of the animation's current styles into its target element'sstyle attribute.

It is primarily used to write the styles for the final state of an animation into the target element, so that the styling persists after the animation ends.

Syntax

commitStyles()

Parameters

None.

Return value

None (undefined).

Description

ThecommitStyles() method is primarily used to write thecomputed values for the final state of an animation into the target element'sstyle attribute, so that the styling persists after the animation ends.This can be done when the animation has finished (that is, theAnimation object'sfinished property has resolved).

commitStyles() alongside fill mode

On older browsers, you must specify thefill mode in order to be able to commit the styles to the elementafter the animation has finished.

The code below shows how you can animate an element namedanimatedElement, settingfill: "forwards" to persist the animation styles after it finishes.Once the animation is finished we commit the styles to the element withcommitStyles().

// Start the animationconst animation = animatedElement.animate(  { transform: "translate(100px)" },  { duration: 500, fill: "forwards" },);// Wait for the animation to finishawait animation.finished;// Commit animation state to he animatedElement style attributeanimation.commitStyles();// Cancel the animationanimation.cancel();

Asfill persists the animation indefinitely, once we've committed the styles, we cancel the animation.

Note that the same effect could be achieved withfill alone, butusing indefinitely filling animations is discouraged.Animationstake precedence over all static styles, so an indefinite filling animation can prevent the target element from ever being styled normally.

commitStyles() without setting fill mode

In newer browsers you do not need to set thefill mode (see thebrowser compatibility table for specific versions).

The code below shows how you can animate an element namedanimatedElement, wait on the animation to complete using thefinished property, and then commit the styles to the element withcommitStyles().Because we're not settingfill we don't have to cancel the animation afterwards.

// Start the animationconst animation = animatedElement.animate(  { transform: "translate(100px)" },  { duration: 500 },);// Wait for the animation to finishawait animation.finished;// Commit animation state to the animatedElement style attributeanimation.commitStyles();

commitStyles() works even if the animation has beenautomatically removed.After the element's styles have been committed they can be modified and replaced as normal.

Examples

Animation with and without using fill

This example demonstrates how you can usecommitStyles() to save the computed styles at the end of the animation, both with and without usingfill.It also provides an example of what happens if neithercommitStyles() orfill are used, for comparison.

The example first displays two buttons labelled "commitStyles() only" and "commitStyles() with fill".Both buttons animate when you click them, and both buttons callcommitStyles() to persist the final state of the animation.The difference is that "commitStyles() only" does not specifyfill: "forwards" to persist the animation's final state.On browsers that don't match the current specification the final state may not be captured.

The code then displays a button "No commitStyles() or fill" that can be used for comparison, and a "Reset" button.

HTML

<button>commitStyles() only</button><button>commitStyles() with fill</button><button>No commitStyles() or fill</button>

<button type="button">Reset</button>

button {  margin: 0.5rem;  display: block;}

const reload = document.querySelector("#reset");reload.addEventListener("click", () => {  window.location.reload(true);});

JavaScript

This code defines a click handler for the "commitStyles() only" button.This animates the button to move right or left when it is clicked.Note thatcommitStyles() is called immediately after the animation is finished.

let offset1 = 0;const commitStyles = document.querySelector(".commit-styles");commitStyles.addEventListener("click", async (event) => {  // Start the animation  offset1 = 100 - offset1;  const animation = commitStyles.animate(    { transform: `translate(${offset1}px)` },    { duration: 500 },  );  // Wait for the animation to finish  await animation.finished;  // Commit animation state to style attribute  animation.commitStyles();});

This code defines a click handler for the "commitStyles() with fill" button.This also animates the button to move right or left when it is clicked.As it defines afill it needs to cancel the animation afterwards.

Note thatcommitStyles() is called immediately after the animation is finished.

const commitStylesWithFill = document.querySelector(".commit-with-fill");let offset2 = 0;commitStylesWithFill.addEventListener("click", async (event) => {  // Start the animation  offset2 = 100 - offset2;  const animation = commitStylesWithFill.animate(    { transform: `translate(${offset2}px)` },    { duration: 500, fill: "forwards" },  );  // Wait for the animation to finish  await animation.finished;  // Commit animation state to style attribute  animation.commitStyles();  // Cancel the animation  animation.cancel();});

This code defines a click handler for the "No commitStyles() or fill" button.This also animates the button to move right or left when it is clicked.It doesn't define a fill and we don't cancel the animation.

const noCommitStylesOrFill = document.querySelector(".no-commit-or-fill");let offset3 = 0;noCommitStylesOrFill.addEventListener("click", async (event) => {  // Start the animation  offset3 = 100 - offset3;  const animation = noCommitStylesOrFill.animate(    { transform: `translate(${offset3}px)` },    { duration: 500 },  );});

Result

Click the buttons to animate them.Note that the first button will "jump" at the end of the animation if the current browser still requiresfill for styles to be committed after the end of the animation.The "No commitStyles() or fill" button always jumps at the end, because the final state is not saved.

Specifications

Browser compatibility

See also

• Web Animations API
• Animation for other methods and properties you can use to control web page animation.