How to rotate an image continuously using CSS

Rotating an image continuously in web development is typically done for visual effects and user engagement. Here are some specific purposes and applications for continuously rotating images:

• A loading indicator
• Draw attention and create a dynamic visual effect
• Loading animations or hover effects
• Rotating brand symbols can create a memorable brand presence
• Part of a background animation
• Highlight special promotions, advertisements, or key messages

To rotate an image continuously in CSS, you can use CSS animations. Here is an example of how to achieve this:

<style>
.rotate {
  width: 100px;
  height: 100px;
  animation: spin 5s linear infinite;
}

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

<img src="/img/avatar.mraces.run@300w.png" alt="Rotating Image" class="rotate">

In this example:

• The .rotate class applies the animation to the image.
• The animation property specifies the animation name (spin), duration (5s), timing function (linear), and that it should run infinitely.
• The @keyframes rule defines the spin animation, rotating the image from 0 degrees to 360 degrees.

You can adjust the duration to make the rotation faster or slower by changing the 5s value to your preferred duration.