Run css animation back and forth on clicks

Question

With css @keyframes I'm trying to attach some animation to an element when it is clicked.

.animate {
    animation-name: action;
    animation-duration: 2s;
    animation-timing-function: linear;
    background-color: green;
} 

@keyframes action {
    0% {
        background-color: gray; 
    }  

   50% {
       background-color: red;
   }

   100% {
       background-color: green;
   }
}

DEMO

The .animate class is added on click, and the box animates from gray to green. But now I would like to animate back to gray when I click it again (toggle functionality). I tried using the same animation using animation-direction: reverse but no animation was played. The animation should not play initially (I encountered that a couple of times). Any suggestion how I can achieve that?

Answer 1

I would consider using the animation-play-state property and also use infinite and alternate. The idea is to run the animation and stop it when it ends, then run it again and so on:

const div = document.querySelector('.target')
div.addEventListener('click', (e) => {
   div.classList.add('play');
   setTimeout(function() {
      div.classList.remove('play');
   },2000)
})

.target {
  width: 100px;
  height: 100px;
  background-color: gray;
  cursor: pointer;
  animation: action 2s linear alternate infinite;
  animation-play-state:paused;
}
.play {
  animation-play-state:running;
}

@keyframes action {
  0% {
    background-color: gray; 
  }  

  50% {
    background-color: red;
  }

  100% {
     background-color: green;
  }
}

<div class="target">

</div>