JSFiddle - React, Tailwind, and code Playground

HTML

<div id="exmpl"></div>
<button id="btn">Try it</button>

CSS

#exmpl {
  margin: 100px auto 0 auto;
  height: 100px;
  width: 10px;
  background: #000;
  -webkit-animation: anim 3s infinite linear;
  animation: anim 3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#btn {
  margin: 100px auto 0 auto;
  display:block;
}
.animationIsOff {
  
}

JavaScript

document.getElementById("btn").addEventListener("click", function(){
	document.getElementById("btn").className += " animationIsOff";
});