JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="container">
  <div id="inner">
  
  </div>
</div>
<button id="stopbtn">
Stop
</button>

CSS

#container {
  position: relative;
  overflow: hidden;
  width: 125px;
  height: 125px;
}
#container #inner {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(https://cdn.pixabay.com/photo/2016/07/15/23/37/chess-board-1520707_960_720.jpg) 0 0 no-repeat;
animation: rot 5s linear infinite;
}
@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#container:hover #inner {
  animation-play-state: paused;
}

JavaScript

function stopit() {
  console.log("clicked");
  console.log(document.querySelector("#container #inner"));
  document.querySelector("#container #inner").style.animationPlayState = 'paused';
}
stopbtn.addEventListener("click", stopit);