How to Create a Rotate Animation in CSS

The most common animation that we see on the web nowadays is the rotate animation. Be it a mobile application or a web application, rotate animation can be seen everywhere in the form of a loader which runs while the content is being loaded.

There can also be other forms of the rotate animation such as rotating images on hover, rotating the cross icon(X) on click event, rotating menus, and so on.

In this article, We are going to create such rotate animations from scratch with the help of some real-time examples.

Create the Rotate Animation

To create a rotate animation we need two things, first the animation property or its sub-properties and second a @keyframe rule.

The animation and its sub-properties let you define the key factors of the animation such as animation duration, animation count, and other things such as the progress curve of the animation, animation direction, and so on.

The @keyframes at-rule defines the actual appearance of the animation. It lets you define how the animation will start, how will it grow on various intermediate points and how will it end.

Let’s say we have a div element in our Html document with a class="box". We want to rotate this div element infinitely at a constant speed.

<div class="box"></div>

To rotate this div with animation, we have to create a keyframe which transforms it from 0 degrees to 359 degrees. So, add the following code into your CSS file:

.box{
   width: 70px;
   height: 70px;
   background-color: crimson;
   animation-name: rotateMe;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

/*Define the keyframe*/
@keyframes rotateMe{
   from{
       transform: rotate(0deg);  
   }
   
   to{
       transform: rotate(359deg);
   }
}

This will give you the following output:

Code Explanation:

The basic idea to create a rotate animation in CSS is to transform the given element from 0 degrees to 359 degrees in a given time period.

Keeping this in mind, we used the rotate() function with the transform property which rotates an element on a 2D plane.

At the start of the animation, the element is transformed by 0 degrees which means it will be in its original form. Then we gradually rotate it until the animation completes its one cycle. This continues until the animation stops.

We also used the following animation properties:

• animation-name – Specifies the name of the keyframe(s) that will be applied to the animating element.
• animation-duration – Specifies the duration in which the animation completes its one cycle.
• animation-iteration-count – Specifies the number of times the animation should be played before stopping.
• animation-timing-function – Specifies how the animation will grow over its one cycle.

Use the animation Shorthand Property to Create the Rotate Animation

In the previous example, we used the animation sub-properties to create the rotate animation. But the same animation can also be created with a single animation shorthand property.

The animation property is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state properties.

So, instead of writing each individual property, we can use the animation shorthand. If you do not pass the value of any sub-property, its default value will be used instead.

Add the following Html:

<div class="box"></div>

Below is the modified CSS code for the rotate animation but with the animation shorthand:

.box{
   width: 70px;
   height: 70px;
   background-color: crimson;
   animation: rotateMe 4s infinite linear;
}

/*Define the keyframe*/
@keyframes rotateMe{
   from{
       transform: rotate(0deg);  
   }
   
   to{
       transform: rotate(359deg);
   }
}

This will also give you the same output as in the previous example:

Create a Loading Animation

To create a loading animation, we have to first create a loader circle. Once it’s created, we can rotate it from 0 to 359 degrees in a given time period and then repeat it infinitely to look like an actual loader.

To make the loader circle, we need a div element which has a border of 5px thickness on each side. Next, make the three sides’ border color the same and keep one side’s border color different. Now, to make it a circle, set its border radius to 50%.

Add the below HTML:

<div class="loader"></div>

Apply the below CSS code to it:

.loader{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-top: 5px solid crimson;
    border-right: 5px solid lightgrey;
    border-bottom: 5px solid lightgrey;
    border-left: 5px solid lightgrey;
}

After running the above code you will get the following loader circle:

Now, to rotate the loader, we need to simply apply the animation property on it which will rotate it from 0 to 359 degrees in a time span of 1 second.

Use the below CSS:

.loader{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-top: 5px solid crimson;
    border-right: 5px solid lightgrey;
    border-bottom: 5px solid lightgrey;
    border-left: 5px solid lightgrey;
    animation: rotateMe 1s infinite linear;
}

/*Define the keyframe*/
@keyframes rotateMe{
   from{
       transform: rotate(0deg);  
   }
   
   to{
       transform: rotate(359deg);
   }
}

After running the above code, you will get the following output:

Conclusion

In this article, we learned how to create a rotate animation with pure CSS.

To create a rotate animation in CSS, we need two basic things, first, a keyframe that defines how the animation will look like, and second the animation property or its sub-properties.

So, if you have a keyframe that transforms the given element from 0 to 359 degrees and use this keyframe in the animation property, the element will start rotating automatically(provided that the animation duration is not set to 0).

Thanks for reading.