css3 旋转在 IE9 和 Firefox 中不起作用

Question

我正在尝试让这段代码在 IE9 和 Firefox 中工作。它在 chrome 中工作得很好

http://jsfiddle.net/THSdP/1/

@-webkit-keyframes spin {  
    from {  
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
    }  
    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg); 
        -ms-transform: rotate(360deg);
        }  
    }
#rsSpinner{
        -webkit-animation-name: spin;  
        -webkit-animation-iteration-count: infinite;  
        -webkit-animation-timing-function: linear;  
        -webkit-animation-duration: 40s;
    }  

该代码只显示了 Chrome 的代码，它在那里工作，但我似乎无法让其他前缀集在 IE 和 Firefox 中工作。

Answer 1

你还没有为firefox定义动画功能，只为webkit和ms定义。这就是为什么它在 Firefox 和 IE 中不起作用的原因。

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

另一个建议是将前缀 free 放在定义的底部。

这是工作代码:http://jsfiddle.net/THSdP/5/