How to Make Infinite Rotation Using CSS (Beginner Friendly Guide)

Do you also want to make something spin non stop on your website – like a logo , loading icon or an image or anything you want? I will show you this using few CSS lines – and then you can make any element rotate forever. We will do this using @keyframes and CSS animation. No JavaScript needed!

 

How to Make Infinite Rotation Using CSS

 

 

We will create a simple animated box that spins in a circle , never stops spinning , uses only CSS.
CSS animations are lightweight and smooth , dont need JavaScript and are easy to control using classes and timing.

Create a Box or Image:-

<div class="spinner"></div>

.spinner {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 50px auto;
  border-radius: 50%;
}

This code gives you a blue circle in the center of the page.

Now, Add the Infinite Rotation:-

.spinner {
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin – rotation from 0 to 360 degrees.
animation: spin 2s linear infinite:  tells the circle to keep spinning every 2 seconds, forever.

if you want to use an image instead then :-

<img src="logo.png" class="spinner" width="100" height="100">

Thats it! With just a few lines of CSS you can make any element rotate forever. This is great for loading animations , fancy UI effects.