CSS3动画旋转上不工作的Firefox

Question

我试图与所有的浏览器这方面的工作，但我不能复制Firefox中的作用：我想复制这样的代码

http://jsfiddle.net/vq3xuafb/

谁有-webkit-并更改为-moz-，但不起作用。

#ball_3 { 
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.7, 0.9, 0.9); 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transform-origin: 6px 30px; 
} 
@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(0deg) scale(1);} 
    100% {-webkit-transform: rotate(1440deg) scale(1);} 
} 

另外我不知道它是否适用于Opera或IE。

Answer 1

这是因为您缺少标准前缀@keyframes，animation和transform。

此外，您可以使用这种简写缩小您的animation语法。

animation: rotate 2s infinite cubic-bezier(0.5, 0.3, 0.9, 0.9); 

---

Updated Fiddle

#hidder { 
 
    display: block; 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: grey; 
 
    z-index: 99988; 
 
    opacity: 0.5; 
 
} 
 
#spinner.active { 
 
    display: block; 
 
} 
 
#spinner { 
 
    display: block; 
 
    position: fixed; 
 
    height: 60px; 
 
    width: 60px; 
 
    top: 40%; 
 
    left: 48%; 
 
    z-index: 99989; 
 
} 
 
.spinner_ball { 
 
    position: absolute; 
 
    display: block; 
 
    background-color: white; 
 
    left: 24px; 
 
    width: 12px; 
 
    height: 12px; 
 
    border-radius: 6px; 
 
} 
 
#ball_1, 
 
#ball_2, 
 
#ball_3 { 
 
    -webkit-animation: rotate 2s infinite cubic-bezier(0.5, 0.3, 0.9, 0.9); 
 
    animation: rotate 2s infinite cubic-bezier(0.5, 0.3, 0.9, 0.9); 
 
    -webkit-transform-origin: 6px 30px; 
 
    transform-origin: 6px 30px; 
 
} 
 
#ball_2 { 
 
    -webkit-animation: rotate 2s infinite cubic-bezier(0.5, 0.5, 0.9, 0.9); 
 
    animation: rotate 2s infinite cubic-bezier(0.5, 0.5, 0.9, 0.9); 
 
} 
 
#ball_3 { 
 
    -webkit-animation: rotate 2s infinite cubic-bezier(0.5, 0.7, 0.9, 0.9); 
 
    animation: rotate 2s infinite cubic-bezier(0.5, 0.7, 0.9, 0.9); 
 
} 
 
@-webkit-keyframes rotate { 
 
    0% { 
 
    -webkit-transform: rotate(0deg) scale(1); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(1440deg) scale(1); 
 
    } 
 
} 
 
@keyframes rotate { 
 
    0% { 
 
    transform: rotate(0deg) scale(1); 
 
    } 
 
    100% { 
 
    transform: rotate(1440deg) scale(1); 
 
    } 
 
}

<div id='hidder'></div> 
 
<div id="spinner"> <span id="ball_1" class="spinner_ball"></span> 
 
    <span id="ball_2" class="spinner_ball"></span> 
 
    <span id="ball_3" class="spinner_ball"></span> 
 
</div>