JSFiddle - React, Tailwind, and code Playground

by lq_blocco

HTML

<div id="aD" style="-webkit-animation-play-state:paused;">animated div</div>
<div id="cD">click div</div>

CSS

div#aD{background-color:red;}
div#cD{background-color:blue;}

JavaScript

var animationDiv = document.getElementById("aD");
var clickDiv = document.getElementById("cD");
clickDiv.addEventListener("click", function(){
    if (animationDiv.style.webkitAnimationPlayState == "paused") {
        animationDiv.style.webkitAnimationPlayState = "running";
    }else if(animationDiv.style.webkitAnimationPlayState == "running" || animationDiv.style.webkitAnimationPlayState == ""){
        animationDiv.style.webkitAnimationPlayState = "paused"; // assuming you want to toggle
    }
    console.log(animationDiv.style.webkitAnimationPlayState);
})