<img class="normal"src="https://cdn.mos.cms.futurecdn.net/snbrHBRigvvzjxNGuUtcck.jpg" />
<h2>Normal Mode</h2>
<br />
<img class="reverse" src="https://cdn.mos.cms.futurecdn.net/snbrHBRigvvzjxNGuUtcck.jpg" />
<h2>Reverse Mode</h2>
<br />
<img class="alternate" src="https://cdn.mos.cms.futurecdn.net/snbrHBRigvvzjxNGuUtcck.jpg" />
<h2>Alternate Mode</h2>
<br />
<img class="alternate-reverse" src="https://cdn.mos.cms.futurecdn.net/snbrHBRigvvzjxNGuUtcck.jpg" />
<h2>Alternate Reverse Mode</h2>
<br />

img{
  width: 200px;
  height: 200px;
  margin: 50px;
  animation-name: slide;
  animation-duration: 3s;
  animation-iteration-count: infinite
}

.normal{
   animation-direction: normal;
}
.reverse{
   animation-direction: reverse;
}
.alternate{
   animation-direction: alternate;
}
.alternate-reverse{
   animation-direction: alternate-reverse;
}

@keyframes slide{
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}