Clockwise and Anticlockwise Spin in CSS Keyframes

@keyframes clockwiseSpin {
  from  {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes antiClockwiseSpin {
  from  {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}


.clockwiseSpin {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: clockwiseSpin;
  animation-timing-function: linear;
}

.antiClockwiseSpin {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: antiClockwiseSpin;
  animation-timing-function: linear;
}