使用CSS3变换/动画与font-face产生"摇摆"旋转器gif样

Question

我正在使用CSS变换/动画与font-face(twitter bootstrap/font-awesome)来生成一个类似spinner的gif图标.

问题是图标在360度左右时会摇摆不定.看到这个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>?

注意:如果有人想在您自己的Web应用程序中使用此代码,请确保在完成所需操作时从DOM中删除此微调器.保持此图标在后台旋转会耗尽CPU,无论您不相信浏览器.此外,简单地切换其可见性,即display:none不起作用.您需要将其从DOM中删除,如下所示:$('#iconRepeatMain').remove();

Answer 1

默认情况下,CSS使用属性转换有关其垂直和水平中心的内容transform-origin.此默认值的简写语法是50% 50%,表示原点的x和y值.

对于这个图标,我发现将y原点移动到38%会使它平滑一点,但是你需要使用它来获得精确值.在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%;
}

有关该transform-origin属性的更多信息,我推荐有关该属性的MDN文章.