Endless or Infinite Rotate Animation in CSS

Now I am going to show you another amazing trick with CSS. Here you will see the infinite rotate animation in CSS.

This trick is so easy and simple, but so effective and enjoyable. With just a few lines of CSS code, you will able rotate an element. This is the part of CSS3 which is the more advanced version of CSS.

To do it, we are going to use the CSS @keyframes Rule. The CSS keyframes can give animation effect by giving element animation rule.

First of all, we will create a rectangle. We are taking the rectangle in our example.

Below is our HTML element:

<div class="rotate-element"></div>

We will give our element a rectangle shape in our CSS.

Below is our complete CSS code that will give a rectangle shape to our element and add the infinite rotate animation:

  /* Safari 4.0 - 8.0 */
    @-webkit-keyframes infiniteRotate {    
         0% { -webkit-transform: rotate(0deg); }
         100% { -webkit-transform: rotate(360deg); }
    }

    /* Standard syntax */
    @keyframes infinite-rotate {  
         0% { -webkit-transform: rotate(0deg); }
         100% { -webkit-transform: rotate(360deg); }
    }
.rotate-element {
  width: 55px;
  height: 55px;
  background-color: green;
  -webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
  animation: infiniteRotate 2s linear infinite;
}

In the above code, I have first created the animation rule with the CSS keyframes. After that, we have called our keyframe animation by its name into our element class’s animation property.

Also, read:

• CSS Spinner Or Loader Using Font Awesome Icon
• CSS Spinner Or Loader Using Font Awesome Icon

You can notice that in our animation property I have used the “infinite” value. This value of animation property makes our animation with endless effect. If we don’t use the infinite property, our element would rotate only once and then stop rotating. So with this property, we set an endless or infinite rotate animation.

We have set a height and width of our element with the green background. Thus we are able to see a green rectangle on our web page. By giving the CSS3 keyframes rule we are rotating it.

Now if you run our code on your browser, then you will see a green rectangle rotating infinitely. It will take 2 seconds to complete one rotation as I have set the animation duration to “2s” which means 2 seconds.

In the same way that you have seen in this tutorial, you can give infinite rotate animation effect using CSS to any element. the main task will be done by the CSS3 keyframes property.