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

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>

score 3 · Accepted Answer · answered Jun 22 '21 at 06:43

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>

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

1 Answers1