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

Question

我试图让这段代码在 IE9 和 Firefox 中工作。它在铬中工作得很好

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/

Answer 2

为 IE 添加这个

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */