CSS3 rotation in IE9

Question

I have a jsfiddle that should work in IE9 but that doesn't

The CSS:

#MyDiv{
    width:150px;
    height:150px;       
    margin:100px 100px;
    background-color: red;
    transition:all 2s ease;
    -ms-transition:all 2s ease;}

.Rotate{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform: rotate(360deg);}

The javascript:

$(document).ready(function () { AddRotate(); });

function AddRotate() {

    $('#MyDiv').addClass('Rotate');  

    setTimeout(function () {
        RemoveRotate();
    }, 2000);    
}

function RemoveRotate() {

    $('#MyDiv').removeClass('Rotate');

    setTimeout(function () {
       AddRotate();
    }, 2000);  
}

And the HTML: <div id="MyDiv">test</div>

I'm not sure why it's not working. It's about creating a CSS rotation with a transition; where's the bug and how do you fix it to make it work in IE9?

Thanks.

Answer 1

Rotation is supported in IE9, but CSS transitions aren't.

You'll need to use a javascript solution.

My suggestion is to use the CSS Sandpaper library, as this allows you to use standard CSS for your transitions, even in IE, which in turn means that you don't have to switch to JS for other browsers just because of IE.

Hope that helps.

Answer 2

Transitions are not support in IE9, they are only supported since IE10. See Can I Use for more information.