使用webkit-animation进行css轮换

Question

我试图通过以下方式获得旋转效果：

#outer {
    position:relative;
    width:50%;
    left:0.3%;
    top:0.2%;
    -webkit-animation: rotation 30s infinite linear;
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

但它摇摆不定。我不确定它是否只是外环的CSS问题并不是一个完美的＆＃34;圈。为什么这样做？

外圈：

您可以看到演示here。

Answer 1

它出现上下波动的原因是因为你的形象不平衡。您可以使用this进行测试。

<div></div>
<img src="http://i.imgur.com/LbXvgbp.png" width="400" />
<style>
    * { position: absolute }
    div {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: #000;
    }
</style>

它似乎是椭圆形的 - 比高大更宽。

Answer 2

您有动画和关键帧的-webkit-前缀，但对于其他浏览器，您也需要非前缀属性（这些不需要-moz-和-ms-）：

#outer {
  -webkit-animation: rotation 30s infinite linear;
  animation: rotation 30s infinite linear;
}
@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
}
@keyframes rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}

Answer 3

适合我...你在使用什么浏览器？如果它不是webkit，那么在没有提供正确的供应商前缀的情况下，您将无法看到任何内容。这就是我经常写变换的方式

-webkit-transform:;
-moz-transform:;
-ms-transform:;
transform:;

Answer 4

Internet Explorer 10，Firefox和Opera支持@keyframes规则。

Safari和Chrome支持另一种选择，即@ -webkit-keyframes规则。

注意：Internet Explorer 9及早期版本不支持@keyframes规则。

您应该提供带有和不带-webkit-的规则来支持所有当前的浏览器。

@keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to   {-webkit-transform: rotate(359deg);}

@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to   {-webkit-transform: rotate(359deg);}

W3Schools