Infinite Rotation with CSS Animation

One simple yet effective technique is creating an infinitely rotating element. This kind of animation can be used to attract attention to specific parts of a page, such as icons, loaders, or interactive elements. It is often used in UI design to indicate ongoing processes or to add a subtle dynamic touch to otherwise static content.

Implementing continuous rotation with CSS is quite straightforward. By using keyframe animations and applying a rotation transform, you can make an element spin endlessly in a clockwise direction. The speed, timing and smoothness of the animation can be easily adjusted to match the design of your website.

In this example, we will create a simple infinite rotation animation using pure CSS. This approach keeps the solution lightweight, efficient, and easy to integrate into any project without additional dependencies.

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