CSS: rotate an image indefinitely

How to rotate an image, icon, div or any other element through 360 degrees.

Let's start by defining an element to rotate. Note the class name, "rotating", which will be used for the CSS animation.

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

Then let's add the following CSS, where we define a "rotating" animation.

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 2s linear infinite;
}

The animation goes from 0 to 360 degrees.
animation: rotating 2s linear infinite; => we set the animation name, the duration (2 seconds),
the easing function (linear), which keeps the speed constant,
and infinite, which repeats the animation forever.