How to create a spinning animation in CSS?

The best way to create a spinning animation using CSS is to use the keyframe & animation property. You can create many different variations in the keyframe and plug it into the animation property.

In this post, I will show you a very simple and easy-to-build spinning box that rotates clockwise. See its demo below.

Code for this spinner

To create the above rotating spinner, I have the following HTML:

HTML

<span class="animate-me"></span>

As you see in the above HTML, I only have a span tag with an animate-me class. You can use div or any other HTML tags. We need to select this HTML element in our CSS.

CSS

.animate-me {
  display: block; /* because span is an inline element, for div or other block elements this property is not required */
  width: 100px;
  height: 100px;
  animation: spinning 3s linear infinite;
  transform-origin: center;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
    background-color: red;
  }
  25% {
    transform: rotate(90deg);
    background-color: green;
  }
  50% {
    transform: rotate(180deg);
    background-color: blue;
  }
  75% {
    transform: rotate(270deg);
    background-color: yellow;
  }
  100% {
    transform: rotate(360deg);
    background-color: mediumorchid;
  }
}

In the above CSS, I created a 100px (width & height) box. Next, I created a keyframe. To create a keyframe, you have to specify it like this @keyframe and then its name. You can name it anything you like. And this name will be used in the animation property that I will discuss later. See the full syntax below.

@keyframes identifier {
  from {
    /* your css goes here */
  }
  to {
    /* your css goes here */
  }
}

There are no boundaries. You can break any number of parts between the “from & too.” Here the “from” is the starting point and the “to” is the endpoint.

You can also specify them by percentages like this example below.

@keyframes identifier {
  0% {
    /* your css goes here */
  }
  100% {
    /* your css goes here */
  }
}

This is the same as the last example.

You can learn more about CSS keyframes on MDN, W3Schools & YouTube.

Use your keyframe in the animation property

CSS keyframe can’t do anything alone. Until this point, you created the keyframe but never used it anywhere. And this is where the animation property comes into play.

The animation property takes/accepts 8 different values. However, we don’t need all of them. In this example, I only used the following 4 of them:

1. animation-name (spinning)
2. animation-duration (3s)
3. animation-timing-function (linear)
4. animation-iteration-count (infinite)

Animation name:

This is the name of the keyframe that I mentioned earlier. You can name it anything you like. In my example, I named my keyframe “spinning.” So I referred this name to the animation property. This is how the animation property finds my keyframe by its name.

Animation duration:

Animation duration is the total time of one iteration. That means this is the time to complete from 0% to 100%. You can use any number of times you like. I wanted to rotate the box at a medium speed. So I used 3 seconds. If you want to move it fast, you can use 1 second instead. But if you want to make it slower than mine, you can specify 5 seconds or whatever you like. The greater the number (time), the more iterations will be slower.

Animation timing function:

In simple words, this is the style of the animation. In my example, I used linear but there are others you can try. Such as ease-in, ease-out, ease-in-out, etc.

Animation iteration count:

This is the total number of iterations. It specifies how many times the animation will happen. For example, if you want this box to rotate 3 times and then make it stop, then you can use the number 3. In my example, I used infinite, because I want to rotate the box sine-die.

See more details about all these 8 animation property values.

Conclusion

This is a simple spinning animation made by CSS only. To be more specific, it’s mostly built with CSS keyframe & animation properties.

I not only gave you the code but also explained them. Also, I referred to external sources if you need further explanation or if you want to deep dive.

Therefore if you have any questions, please let me know.