Using CSS3 transforms/animations with font-face produces “wobbly” spinner gif-like

问题

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();

回答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.

回答2:

Try setting a specific height and width on the element. Through trial and error, I found that adding:

#iconRepeatMain {
    width: 26px;
    height: 19px;
}

centers the font pretty well and seems to eliminate the wobbling. However, it's possible this is dependent on which browser is being used -- test it thoroughly.

http://jsfiddle.net/mblase75/pGhFX/13/

回答3:

I don't see it documented in the pages at Font Awesome's site, but the CSS source shows an icon-spin class which rotates an icon endlessly, and for your icon-repeat logo, has virtually no wobble.

<i class="icon-repeat icon-spin"></i>

...though I'm guessing it's really intended for the icon-spinner icon:

<i class="icon-spinner icon-spin"></i>

Edit: d'oh... this relies on a more recent font-awesome.css than the one in your example. So maybe the answer is just that they fixed the wobble themselves. The icon-spin class is new though.

回答4:

How I solved my issue with out-of-center rotation of icon font: There were several issues I had to resolve: 1. size of icon: it has to be whole px size (e.g. font-size:small; makes my icon 17.5px so center is not absolute center for transformation) 2. defining display: block on icon level makes it center correctly in the middle of the parent div 3. defining exact square size of parent div (in my case button) and fixed padding made it center correctly 4. adding any text-shadow will change the size of the inner icon so it will be out of the center. Trick is to change the hover style to be the same shadow with color same as background in my case

So here is the code:

CSS:

button.close {
padding: 10px;
opacity: 0.8;
text-shadow: 1px 1px 1px #999; 
width: 40px;
height: 40px;
}
button.close i{
font-size: 20px;
max-width: 20px;
max-height: 20px;
display: block;
}
button.close:hover {
text-shadow: 1px 1px 1px #fff; 
}
/* rotation CSS*/
@keyframes anim-rotate {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes anim-rotate-next {
0% {
-moz-transform:rotate(0);
-webkit-transform:rotate(0);
transform:rotate(0);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotate{
animation: anim-rotate-next 1s normal linear;
}
.rotate.down{
animation: anim-rotate 1s normal linear;
}

HTML:

<button type="button" class="close"><i class="lnr lnr-sync rotate"></i></button>

and finally JQuery for switching rotate class JQuery:

$("#parentDiv").on('click', 'i.lnr-sync', function () {
// rotiraj ikonu
$(this).toggleClass("down");
});

来源：https://stackoverflow.com/questions/13959259/using-css3-transforms-animations-with-font-face-produces-wobbly-spinner-gif-li