JSFiddle - React, Tailwind, and code Playground

HTML

<div id="aD">animated div</div>
<div id="cD">click div</div>

CSS

#aD{ background-color:green;
 height:30px;
 margin:2px 0 5px 2px;}
 #cD{background-color:blue;}
@keyframes anim{
   0%{ background-color:green;}
  100%{ background-color:red;}
}
#aD:hover{animation: anim 1s infinite;
cursor:pointer;}

JavaScript

var animationDiv = document.getElementById("aD");
var clickDiv = document.getElementById("cD");
clickDiv.addEventListener("click", function(){
    if (animationDiv.style.animation == "") {
animationDiv.style.animation = " anim .5s forwards";
//animationDiv.style.animation = " anim running  .1s infinite";
    }else{
animationDiv.style.animation = ""; // assuming you want to toggle
    }
 console.log(animationDiv.style.animationplaystate);
})