Problem

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.

Solution

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

<style>
@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;
}
</style>

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