Infinite Rotation with CSS Animation

An infinitely rotating element on a website is an interesting way to attract the user’s attention. It is quite easy to implement such an element using CSS. Here is an example of CSS code for infinite clockwise rotation.

CSS

.rotate-clockwise {
  animation-name: clockwise;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

CSS class .rotate-clockwise can be written in one line.

.rotate-clockwise {
  animation: 3s linear infinite clockwise;
}

If you need to rotate counterclockwise, then this is also easy to do.

CSS

.rotate-counterclockwise {
  animation-name: counterclockwise;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

You can see an example of working code on Codepen: https://codepen.io/igorrybalko/pen/XJrLRvg