Question

我试图让这段代码在IE9和Firefox中运行。它在chrome

中工作得很好

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

另一个建议是将前缀置于定义的底部。

以下是工作代码：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 */

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

2 个答案: