CSS animations make it possible to do incredible things with the elements that make up your documents and apps. There are things you might want to do that aren't obvious and many clever ways to do things that may not be immediately apparent. This article is a collection of tips and tricks we've found that will hopefully make your work easier, including how to re-run a completed animation.

Run an animation again

TheCSS Animations specification doesn't offer a way to run an animation again. You can't just set the element'sanimation-play-state to"running" again once the animation ends. Instead, you have to use JavaScript to get a completed animation to replay.

This is one way to do it that is a stable and reliable method.

HTML

First, let's define the HTML for a<div> we wish to animate and a button that will play (or replay) the animation.

<div></div><button>Run the animation</button>

CSS

Let's style the box using CSS.

.box {  width: 100px;  height: 100px;  border: 1px solid black;  margin-bottom: 1rem;}

JavaScript

Next, we'll look at the JavaScript that does the work. TheplayAnimation() function is to be called when the user clicks on the run button. Instead of using the@keyframes at-rule, wedefine the keyframes in JavaScript.

const box = document.querySelector(".box");const button = document.querySelector(".runButton");/*  equivalent to the following CSS @keyframes  @keyframes colorChange {    0% {      background-color: grey;    }    100% {      background-color: lime;    }  }*/const colorChangeFrames = { backgroundColor: ["grey", "lime"] };function playAnimation() {  box.animate(colorChangeFrames, 4000);}

TheplayAnimation method calls theElement.animate() method on the box to play the animation. Theanimate() method takes a keyframe object or array of keyframe objects and animation and animation options as arguments. In this case, we pass the method thecolorChangeFrames keyframe object and an animation duration.

We also need to add an event handler to our run button so it will actually do something:

button.addEventListener("click", playAnimation);

Result

Waiting for an animation to complete before stopping

In the previous example, if the run button is clicked before the animation is completed, the current animation will abruptly stop and the animation will restart from the0% orfrom starting keyframe. If you would like the current animation iteration to be complete before starting a new one, we can disable therun button while the animation is running, reenabling it based on thefinish event. Alternatively, if we want to enable multiple iterations of the animation, we can check to see if an animation is running on the element and increment theanimation-iteration count for each button click while the animation is running.

In this example, we update ourplayAnimation() function to disable the button when clicked, and listen for thefinish event to re-enable the button.

<div></div><button>Run the animation</button>

.box {  width: 100px;  height: 100px;  border: 1px solid black;  margin-bottom: 1rem;}

const box = document.querySelector(".box");const button = document.querySelector(".runButton");const colorChangeFrames = { backgroundColor: ["grey", "lime"] };button.addEventListener("click", playAnimation);

function playAnimation() {  button.setAttribute("disabled", true);  const anim = box.animate(colorChangeFrames, 4000);  anim.addEventListener("finish", (event) => {    button.removeAttribute("disabled");  });}

The code disables the button and starts the animation. The button is re-enabled when the animation completes.

Stacking context in animations

The properties that are animated during a CSS animation behave as if they were included in thewill-change property declaration. Any property that would create a stacking context, if marked aswill-change, makes the element receive a new stacking context.

In the case ofanimation-fill-mode: forwards (andboth), the animated properties remain at their final keyframe state after the animation is finished. The properties keep thewill-change status, so if a new stacking context is created during the animation and is still present at the end of the animation, the target element retains the stacking context after the animation has finished.

See also

• Web Animations API
• Animation Interface
• CSS animations module