How to continuously rotate an image using CSS

How to use CSS animation to continuously rotate an image

In the establishmentResponse HandbookOn the landing page, I had to search how to rotate the image. I want to rotate oneSVGPictures, but this applies to any picture type. Actually any HTML element.

Add this CSS directive to the element to be rotated:

animation: rotation 2s infinite linear;

You can also choose to add onerotateThe element of the class, instead of directly targeting it:

.rotate {
  animation: rotation 2s infinite linear;
}

Adjustment2sSlow down or speed up the rotation cycle.

Then add the following line outside of any selectors:

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

That's it! Your element should now be rotated.

Take a lookCSS animationwithCSS transitionTourist guide

This is the result displayed in Codepen:

Look at the penHow to use CSS animation to continuously rotate an imageBy Flavio Copes (@flaviocopes) InCipher pen.

Tech Wiki Online!