How to Use CSS Animation to Rotate Images Continuously

Question

Apu August 20, 2023 › #animation › #css

❌

How to Use CSS Animation to Rotate Images Continuously

To rotate images continuously, we can use the css animation property.

Example : Rotate an image continuously using css #

In the above example, as you can see we have an <img> element with a class my-img.

We have used the css animation property and set its name to rotateImg.
```
.my-img{
   animation: rotateImg 2s linear infinite;
  }
```

Now we will define the rotateImg function.

@keyframes rotateImg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

2s : it sets the animation duration.
infinite : to rotate the image continuously.

1 Answer

Write Your Answer

Anonymous Saturday, November 11, 2023
2023-08-20T15:49:01+05:30

1

You can use CSS animation to continuously rotate images by using the following code:
<img src="/favicon.png" class="rotate">
<style>
.rotate{
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform:rotate(0deg);
}
  to {
    transform:rotate(360deg);
}
}
</style>
This code will create a CSS class called .rotate that can be applied to any image you want to rotate. The .rotate class will apply the rotation animation, which will rotate the image 360 degrees over a period of 2 seconds. The infinite keyword will make the animation repeat indefinitely, and the linear keyword will make the animation play at a constant speed.
You can also use CSS animation to rotate images for a limited number of times.
<style>
.rotate{
  animation: rotation 2s infinite linear;
  animation-iteration-count: 5;
}
</style>

Reply Delete
Share

Apu · Accepted Answer · 2023-08-20T15:49:01+05:30

To rotate images continuously, we can use the css animation property. Example : Rotate an …