Clockwise and anticlockwise spin in CSS keyframes

CSS

Feel like spinning an element?

Using CSS keyframes you can rotate an element using the transform property to create an animation, examples of both a clockwise and anti-clockwise animation are below.

Code

@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;
}