menu

Questions & Answers

How can I get a Javascript CSS animation to run more than one time?

I have some Javascript code that runs a CSS animation. It works fine, but I need to refresh the browser to get it to run again. How can I modify my code to get it to run every time the button is clicked?

Below is the code I used.

/*Javascript*/
document.getElementById('LogoContainer').addEventListener('click',function() {
var c = document.getElementsByClassName('logo-rec');
for (var i = 0; i < c.length; i++) {
c[i].classList.add('logo-animate');
}
})

/*HTML*/    
<button id="LogoContainer">
<div class="logo-rec"></div>
</button>

/*CSS*/    
.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
}
    
@keyframes MoveLeft {
0% { transform : translatex(0px) }
50%  { transform : translatex(-15px) }
100%  { transform : translatex(35px) }
}
Answers(2) :

The problem is that once the animation has run the system thinks - well I've run it, so it doesn't get run again when you click (the animation name stays the same).

So, this snippet adds an event listener for the animationend event and when that happens it removes the class setting that caused the animation so when you come to click again it's a new class setting and the animation happens once more.

document.getElementById('LogoContainer').addEventListener('click', function() {
  var c = document.getElementsByClassName('logo-rec');
  for (var i = 0; i < c.length; i++) {
    c[i].classList.add('logo-animate');
    c[i].addEventListener('animationend', function() {
      this.classList.remove('logo-animate');
    });
  }
})
.logo-animate {
  animation-name: MoveLeft;
  animation-duration: 3s;
}

@keyframes MoveLeft {
  0% {
    transform: translatex(0px)
  }
  50% {
    transform: translatex(-15px)
  }
  100% {
    transform: translatex(35px)
  }
}
<button id="LogoContainer">
<div class="logo-rec">abcd</div>
</button>

Comments:
2023-01-22 00:20:04
A Haworth, thank you soooo much. This works perfectly!

You can utilize the "animation-iteration-count" property in your CSS to specify the number of times that the animation should execute. For instance, to make the animation run indefinitely, you may set the animation-iteration-count to "infinite" as follows:

.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
animation-iteration-count: infinite;
}

Alternatively, you can specify a numerical value to denote the number of repetitions desired. Such as:

.logo-animate {
animation-name: MoveLeft;
animation-duration: 3s;  
animation-iteration-count: 5;
}

This will run the animation 5 times.

Comments:
2023-01-22 00:20:04
Rasaf, thank you for your response. This is not the solution for my situation, because when the button is clicked one time, it will either run the same animation over and over indefinitely, (option 1) or run it 5 times and end (option 2) . What I needed was to run the animation one time on button click and then stop. Then each time the button is clicked it needs to run the animation again.