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.