Question

I’m using CSS transforms/animations with font-face (twitter bootstrap/font-awesome) to produce a spinner gif-like icon.

The problem is that the icon wobbles as it revolves around 360degrees. See this JSFiddle to see what I mean. Does anyone know how to make it not wobble? Or at least make it rotate a little more smoothly?

Here’s the code for that below:

CSS:

i.icon-repeat {
  -webkit-animation: Rotate 500ms infinite linear;
  -moz-animation: Rotate 500ms infinite linear;
  -ms-animation: Rotate 500ms infinite linear;
  -o-animation: Rotate 500ms infinite linear;
  animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
 from {-moz-transform:rotate(0deg);}
 to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(360deg);}
}
#iconRepeatMain{
  display: inline-block;    
  position: absolute;
  z-index:10007;
  left: 50%;
  top: 50%;
  margin-left: -24px; /* -1 * image width / 2 */
  margin-top: -24px;  /* -1 * image height / 2 */
  font-size:36px;
}​

HTML:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<i id='iconRepeatMain' class='icon-repeat' style='font-size:36px; color:red'></i>​

Note: if anyone wants to use this code in your own web app, please be sure to remove this spinner from the DOM when the action it was needed for is done. Keeping this icon rotating in the background burns up CPU regardless of the browser like you won’t believe. Also, simply toggling its visibility, i.e., display:none, doesn’t work. You need to remove it from the DOM like with this: $('#iconRepeatMain').remove();

Answer 1

By default, CSS transforms things about their vertical and horizontal center with the property transform-origin. A short-hand syntax for this default value is 50% 50%, which represents the x and then y value of the origin.

For this icon, I found that shifting the y origin to 38% smooths it out a bit, but you’ll need to play around with it to get the precise values. View on JSFiddle

i.icon-repeat {
  -webkit-transform-origin:50% 38%;
  -moz-transform-origin:50% 38%;
  -ms-transform-origin:50% 38%;
  -o-transform-origin:50% 38%;
  transform-origin: 50% 38%;
}

For more on the transform-origin property, I recommend the MDN article on the property.