CSS3旋转动画在Firefox上不起作用

Question

I'm trying to make this working with all browsers, but I can't reproduce the effect in Firefox:

http://jsfiddle.net/vq3xuafb/

I tried copying the code like this who have -webkit- and changing to -moz-, but not working.

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

Also I don't know if it works on Opera or IE.

Answer 1

Its because you are missing the standard prefix for @keyframes , animation and transform .

Also, you could minify your animation syntax by using this shorthand.

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>