CSS3 圆周运动在 chrome 中与 @-webkit-keyframes 不兼容，在 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>

当我用 @keyframes 替换 @webkit-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;
}

Answer 2

您需要为关键帧规则和动画添加 -webkit- 前缀，试试这个更新的演示。

CSS3 圆周运动在 chrome 中与 @-webkit-keyframes 不兼容，在 Firefox 中与 @keyframes 兼容

CSS3 circular movement doesn't work in chrome with @-webkit-keyframes, and works with @keyframes in Firefox

css

cross-browser