CSS endless rotation animation

Question

I want to make a rotation of my loading icon by CSS.

I have an icon and the following code:

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

But it doesn't work. How can the icon be rotated using CSS?

You can add your own answer. In it, include the code from inside your jsFiddle demo. — thirtydot, Jun 20 '11 at 12:08

Kirk Strobeck · Answer 1 · 2017-06-01T10:46:58.560

351

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

<div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div>

edited Jun 01 '17 at 10:46

answered Jan 23 '14 at 22:26

Kirk Strobeck

17,984
20
75
114

14

one question , are `-moz-` and `-ms-` prefixes necessary under `-webkit-keyframes` ? as only webkit will read `-webkit-keyframes` i believe it is safe to remove them. – Bor691 Sep 14 '14 at 17:39
3

Am I correct in understanding this is not theoretically perfect since the non-vendor-prefixed properties should always be last so as not to override standards-compliant behavior? See: http://css-tricks.com/ordering-css3-properties/ – Jan 22 '15 at 03:04
Cool. Was checking before editing. Wasn't 100% sure. – Jan 22 '15 at 16:54
@Ricky - Tip: When you have already discussed an edit with the author (as above) it is not a bad idea to mention that in the "edit comments". So the edit is not rejected as a "radical change" ;-) – Leigh Jan 22 '15 at 17:57
If you have problems with chorme to get this running, check if you have set `display: inline-block` on the `.rotating` element. See http://stackoverflow.com/a/10644233/3757139 – Samuel Aug 02 '16 at 14:46
I'm having a problem with this. It causes my div to travel in a circle instead of just rotating in place. Is there a way it can just rotate in place? EDIT: I figured out that I needed to have my height/width be the same as the size of the glyphicon in it. – levininja Nov 30 '16 at 22:48
1

If you're using PostCSS, consider using autoprefixer to handle all cross browser issues when just using `transform`. – Michał Pietraszko Mar 28 '17 at 14:37
In my case I need also the css setting `display: inline-block;` to make the animation running – KargWare Oct 07 '22 at 09:54

score 107 · Answer 2 · edited Jul 23 '15 at 23:57

Working nice:

#test {
    width: 11px;
    height: 14px;
    background: url('data:image/gif;base64,R0lGOD lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7');
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
}

<div id='test' class='rotating'></div>

is there any crossbrowser css solution available? – andrej Nov 05 '13 at 16:21 — andrej, Nov 05 '13 at 16:21

Roko C. Buljan · Answer 3 · 2019-09-27T15:23:00.577

36

Infinite rotation animation in CSS

/* ENDLESS ROTATE */
.rotate{
  animation: rotate 1.5s linear infinite; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}


/* SPINNER JUST FOR DEMO */
.spinner{
  display:inline-block; width: 50px; height: 50px;
  border-radius: 50%;
  box-shadow: inset -2px 0 0 2px #0bf;
}

<span class="spinner rotate"></span>

MDN - Web CSS Animation

edited Sep 27 '19 at 15:23

answered Apr 09 '17 at 23:40

Roko C. Buljan

196,159
39
305
313

You'd get my brownie points for updating that spinner to a flex-box... just set the container to display flex and place content center, and flex basis on the child. – Ray Foss Jul 08 '21 at 00:24
@RayFoss first of, talking flexbox, it should be `inline-flex`. Also, there's no need to flex anything for the purpose of explaining an infinite animation ;) Also, child? What child are you talking about? Have you commented under the desired answer? – Roko C. Buljan Jul 08 '21 at 12:34

score 13 · Answer 4 · answered May 06 '18 at 10:57

13

Without any prefixes, e.g. at it's simplest:

.loading-spinner {
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

answered May 06 '18 at 10:57

Dorian

22,759
8
120
116

Kareem · Accepted Answer · 2019-03-04T20:35:05.693

12

Works in all modern browsers

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

edited Mar 04 '19 at 20:35

answered Jun 22 '18 at 21:10

Kareem

5,068
44
38

score 9 · Answer 6 · answered May 20 '20 at 06:07

9

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

div{
   animation: rotate 4s linear infinite;
}

answered May 20 '20 at 06:07

vinkal

91
1
1

4

Hi, welcome to Stack Overflow! When you answer a question you should include some kind of explanation, like what the author did wrong and what you did to fix it. I'm telling you this because your answer has been flagged as low-quality and is currently being reviewed. You can [edit] your answer by clicking the "Edit" button. – Federico Grandi May 20 '20 at 06:50

score 5 · Answer 7 · answered Oct 06 '21 at 06:49

Simply Try This. Works fine

@-webkit-keyframes loading {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes loading {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

#loading {
    width: 16px;
    height: 16px;
    -webkit-animation: loading 2s linear infinite;
    -moz-animation: loading 2s linear infinite;
}

<div class="loading-test">
    <svg id="loading" aria-hidden="true" focusable="false" role="presentation" class="icon icon-spinner" viewBox="0 0 20 20"><path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" fill="#919EAB"/></svg>
</div>

score 3 · Answer 8 · answered Jun 24 '19 at 12:20

Rotation on add class .active

  .myClassName.active {
                -webkit-animation: spin 4s linear infinite;
                -moz-animation: spin 4s linear infinite;
                animation: spin 4s linear infinite;
              }



@-moz-keyframes spin {
       100% {
        -moz-transform: rotate(360deg);
      }
     }
     @-webkit-keyframes spin {
      100% {
         -webkit-transform: rotate(360deg);
       }
     }
     @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
     }

score 3 · Answer 9 · answered Sep 17 '21 at 06:01

the easiest way to do it is using font awesome icons by adding the "fa-spin" class. for example:

<i class="fas fa-spinner fa-3x fa-spin"></i>

you can save some lines of code but of course you are limited to the icons from font awesome. I always use it for loading spinners

here you have the documentation from font awesome: https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

score 2 · Answer 10 · answered Jun 29 '17 at 06:06

<style>
div
{  
     height:200px;
     width:200px;
     -webkit-animation: spin 2s infinite linear;    
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

</style>
</head>

<body>
<div><img src="1.png" height="200px" width="200px"/></div>
</body>

CSS endless rotation animation

10 Answers10

Infinite rotation animation in CSS

Linked

Related