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?

founded solution — http://jsfiddle.net/LwwfG/ answer please, to close question. — Alexander Ruliov, Jun 20 '11 at 12:06
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 · Accepted Answer · 2017-06-01T10:46:58.560

289

@-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

15,873
14
70
107

13

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
2

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

score 93 · 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

20

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

164,703
32
260
278

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

10

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

19,009
8
108
111

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

5

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

4,110
37
34

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

4

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

div{
   animation: rotate 4s linear infinite;
}

answered May 20 '20 at 06:07

vinkal

41
1

3

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 1 · Answer 7 · 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>

score 1 · 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);
       }
     }

CSS endless rotation animation

8 Answers8

Infinite rotation animation in CSS

Linked

Related