<!-- original borrowed from here:

https://codepen.io/ZachSaucier/pen/sFnyD

-->

<!-- NOTE: In Chrome there is a brief glitch during the transition after the first one -->
<h1>Click Spiral to reverse</h1>
<div class='spiralContainer'>
  <div class='spiral'></div>
</div>
.spiralContainer {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 20px;
  animation: spin 3s linear 0s infinite reverse;
  animation-play-state: paused;
}
.spiral {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url(http://farm7.staticflickr.com/6115/6319704650_0a2bd0dcef_o.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  animation: spin 6s linear 0s infinite normal;
  cursor: pointer;
}
.spiralContainer.reverse {
  animation-play-state: running;
}
@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
const spiral = document.querySelector(".spiralContainer");

spiral.addEventListener("click", reverseAnimation);
function reverseAnimation() {
  spiral.classList.toggle("reverse");
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.