Rotate Element Indefinitely With CSS Animation

July 31, 2020 by Andreas Wik

You can rotate an element indefinitely using the CSS animation feature.

First, I’ll give the element an ID.

<img src="pizza.jpg" id="pizza">

 

Then set the animation property for your element to spin 3s infinite linear to have it rotate indefinitely, with each spin taking 3 seconds to complete. spin is just the name for your animation, call it anything you like.

#pizza {
  animation: spin 3s infinite linear;
}

 

Almost there.
Finally, to make this work we need to define the keyframes for our spin animation. We want it to go from 0 degrees to 360 degrees. Like so:

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

This will ensure it spins around, over and over, indefinitely, which was the goal.

Yay!

Playground:

See the Pen Rotate element indefinitely by Andreas Wik (@andreaswik) on CodePen.

 

Share this article

Recommended articles

@awikio