<!-- original borrowed from here:



<!-- 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>
.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() {
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.