Css Animation Won't Play Per Click

I built a carousel for some images. I need my 'next' and 'previous' buttons to use the CSS animation that I assigned them in my javascript function for their event listeners.The an

Solution 1:

The problem is seen because once the system has played the animation it thinks 'well, I've played it'. Setting it to the same again does not make it play again.

To get round this you can unset the animation when it has finished.

In your code add an event listener for the animationend event.

Here's a simplified example:

const div = document.querySelector('div');
div.addEventListener('click', function() { div.style.animationName='grow';});
div.addEventListener('animationend', function() { div.style.animationName='';});

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
@keyframes grow {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }

<div></div>