How to rotate an image continuously using CSS

Jul 30, 2024#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">
Rotating Image

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.