css - CSS3循环运动在带有@ -webkit-keyframes的chrome中不起作用，而在Firefox中与@keyframes一起工作

这是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没有帮助。

最佳答案

像这样添加-webkit-animation：-

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

关于css - CSS3循环运动在带有@ -webkit-keyframes的chrome中不起作用，而在Firefox中与@keyframes一起工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29075553/