Is there a way to make a CSS animation run again on repeated clicks of a button without using timeout? [duplicate]

Question

I am trying to get an animation to run whenever a button is clicked. Right now, it only runs if the page is refreshed and does not run again on repeated clicks of the button.

function myPlayFunction(el){ document.getElementById("myTest").style.animationPlayState = "running"; }

#myTest { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 1s; animation-play-state: paused; } @keyframes example { 0% {background-color: yellow;} 50% {background: purple;} 100%{background: red;} }

<div id="myTest"></div> <div><button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button></div>

Simone Rossaini · Accepted Answer · 2021-06-22 06:43:35Z

As you can see in my example i detect with addEventListener the finish of animation then reset animation

const myTest = document.getElementById("myTest"); function myPlayFunction(el) { myTest.style.animationPlayState = "running"; } myTest.addEventListener("animationend", () =>{ myTest.style.animation = 'none'; myTest.offsetHeight; myTest.style.animation = null; }, false);

#myTest { width: 100px; height: 100px; background: red; position: relative; animation-name: example; animation-duration: 3s; animation-delay: 1s; animation-play-state: paused; } @keyframes example { 0% { background-color: yellow; } 50% { background: purple; } 100% { background: red; } }

<div id="myTest"></div> <div> <button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button> </div>

Collectives™ on Stack Overflow

Is there a way to make a CSS animation run again on repeated clicks of a button without using timeout? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related