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;
}

Answer 2

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

CSS3循环移动在使用@ -webkit-keyframes的chrome中不起作用，并且在Firefox中与@keyframes一起使用

2 个答案: