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
