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.
Comments (1)
How to Use CSS Animation to Rotate Images Continuously
<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>