<input type="checkbox" class="auto" id="auto" checked>
<label class="auto-rotate" for="auto">Auto &#x21bb;</label><br>
<span class="anticlockwise">&#x2190;</span>
<span class="clockwise">&#x2192;</span>
<div class="rotate"></div>

body{
  background: #000;
  width: 168px;
  margin: 0 auto;
}
.rotate{
  background: url('https://martindrapeau.github.io/backbone-game-engine/docs/super-mario-sprite.png') 0 0 no-repeat; 
  width: 32px;
  height: 68px;
  margin: auto;
  float: left;
}

.clockwise, .anticlockwise{
  color: #000;
  cursor: pointer;
  font-size: 40px;
  font-weight: bold;
  font-family: sans-serif;
}

.clockwise{
  float: right;
}

.clockwise:hover ~ .rotate{
  animation: rotate-clockwise 6s steps(21) infinite;
}

.auto{
  margin-top: 40px;
}

.auto:checked ~ .rotate{
  animation: rotate-clockwise 6s steps(21) infinite;
}

.auto:checked ~ .clockwise{
  color: #fff;
}

.auto:checked ~ .anticlockwise{
  color: #fff;
}


.anticlockwise:hover ~ .rotate{
  animation: rotate-anticlockwise 6s steps(21) infinite;
}

.auto{
  display: inline-block;
  margin-left: 0;
}

.auto-rotate{
  color: #333;
  font-weight: bold;
  font-family: sans-serif;
  clear: both;
}

@keyframes rotate-clockwise {  
  0% {background-position: 0 0; } 
  100% {background-position: -672px 0; } 
}

@keyframes rotate-anticlockwise {  
  0% {background-position: -672px 0; }
  100% {background-position: 0 0; } 
}

// Featured on tuts+ 
// https://webdesign.tutsplus.com/articles/15-inspiring-examples-of-css-animation-on-codepen--cms-23937