使用CSS3变换/动画与font-face产生“摇摆”微调gif像

我正在使用带有font-face( twitter bootstrap/font-awesome)的CSS变换/动画来生成一个微调Gif的图标.

问题是,图标摆动360度左右. See this JSFiddle看看我的意思.有谁知道如何使它不摆动？或者至少使它旋转一点更顺利？

以下是以下代码：

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

注意：如果有人想在您自己的网络应用程序中使用此代码,请确保在需要执行的操作完成后将其从DOM中删除.保持此图标在背景中旋转会烧毁cpu,而不管您不会相信浏览器.另外,简单地切换其可见性,即display：none,不起作用.您需要从DOM中删除它：$(‘#iconRepeatMain’).remove();

解决方法

默认情况下,CSS使用属性transform-origin来转换关于它们的垂直和水平中心的事物.此默认值的简短语法为50％50％,表示原点的x值和y值.

对于这个图标,我发现将y原点移动到38％可以让它有所改善,但你需要玩弄它来获得精确的值. 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%;
}

更多关于变换起始属性,我建议the MDN article on the property.