CSS3 圆周运动不适用于带有@-webkit-keyframes 的chrome，而在Firefox 中与@keyframes 一起使用

Question

这是在 Chrome 中不是由 orbit 动画的圆圈。 http://jsfiddle.net/ztkav838/

//CSS
@-webkit-keyframes orbit
{
    from{transform:rotate(360deg) translateX(150px) rotate(-360deg);}
    to{transform:rotate(0deg) translateX(150px) rotate(0deg);}
}
.round_btn
{
    position: absolute;
    left: 50%;
    top: 50%;
    border-style: solid;
    border-color: #000000;
    border-radius:50% !important;
    margin-left:-15px;
    margin-top:-15px;
    width:30px !important;
    height:30px !important;
}
.satellite
{
    animation:orbit 16s linear infinite;   
}
<div data-role="button" class="round_btn satellite"></div>

当我将 @webkit-keyframes 替换为 @keyframes 时，它在 Firefox 中有效: http://jsfiddle.net/mye6mg49/

//CSS
@keyframes orbit
{
    from{transform:rotate(360deg) translateX(150px) rotate(-360deg);}
    to{transform:rotate(0deg) translateX(150px) rotate(0deg);}
}
.round_btn
{
    position: absolute;
    left: 50%;
    top: 50%;
    border-style: solid;
    border-color: #000000;
    border-radius:50% !important;
    margin-left:-15px;
    margin-top:-15px;
    width:30px !important;
    height:30px !important;
}
.satellite
{
    animation:orbit 16s linear infinite;   
}
//HTML
<div data-role="button" class="round_btn satellite"></div>

将 transform 更改为 webkit-transform 没有帮助。

Answer 1

像这样添加-webkit-animation:-

.satellite
{
  animation: orbit 16s linear infinite;
  -webkit-animation: orbit 16s linear infinite;
}