CODEWITHSUNDEEP
csscss-transforms
YeahMKD
YeahMKD

Reputation: 425

css3 rotate not working in IE9 and Firefox

Im trying to get this code to work in IE9 and Firefox. It works perfectly fine in 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;
    }

The code only shows the code for Chrome, and it works in there, but I cant seem to get the other prefix sets to work in IE and Firefox.

Upvotes: 0

Views: 3912

Answers (2)

Endre Simo
Endre Simo

Reputation: 11541

You haven't defined the animation function for firefox, only for webkit and ms. That's why it's not working in Firefox and IE. 

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

Another advice is to put the prefix free at the bottom of the definition.

Here is the working code: http://jsfiddle.net/THSdP/5/

Upvotes: 3

Vaibs_Cool
Vaibs_Cool

Reputation: 6160

Add this for 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 */

Upvotes: 1

Related Questions