Knowledge Base

Table of Contents

Updated on May 17, 2023

Rotate & Spin An Image using CSS


Add an endless spinning animation to an image using CSS, created using CSS rotate with animation:

  • Step 1, we have to define the animation @keyframes spinning.
    • The keyframes should start with from { transform: rotate(0deg) }, end with to { transform: rotate(360deg) }.
    • This should be pretty self-explanatory, it will just spin the image in circles.
  • Step 2, we attach the animation sequence to the CSS class animation-name: spinning.
  • The rest should be easy to understand as well:
    • animation-duration controls the speed of the animation.
    • animation-iteration-count: infinite will just keep on spinning the image.
    • animation-timing-function controls how the animation will look like. Feel free to change this and see how the others work.


Adding this code to your child theme’s style.css will add a spinning animation to your image

@keyframes spinning {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
.spin {
  animation-name: spinning;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /* linear | ease | ease-in | ease-out | ease-in-out */
  animation-timing-function: linear;

<img src="rocket.png" class="spin">