css / jquery animation not supported by IE9 - workaround required

Question

I have the following animation that doesn't work in IE9 as the transition property is not supported.

Unfortunately I have to get it working for IE9+ .

Does anyone know any fix / workaround?

https://jsfiddle.net/jyqkr52q/1/

CSS

.egg{
    position:absolute;
    left:-120px;
    width:150px;
    height:200px;
}
.egg>div{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
}
.egg>div>span{
    background-image:URL('http://leanneoleary.com/test/rollin-animation/Purple_Easter_Egg_small.png');
    position:absolute;
    left:23px;
    top:14px;
    width:150px;
    height:200px;
    text-align:center;
    line-height:45px;
    font-size:24px;
    font-weight:bold;
}

HTML

<div id="egg_box">
    <div class="egg">
        <div><span></span></div>
    </div>
</div>

JS

var $egg = $('#egg_box > div'),
    diameter = $egg.height(),
    perimeter = Math.PI * diameter,
    n = $egg.length,
    i = 0,
    itv;

itv = setInterval(function(){
    if(i>n)clearInterval(itv);
    rotateegg( 500-(diameter*i) );
    i++;
},2000);

function rotateegg(distance){
    console.log( distance );
    var degree = distance * 360 / perimeter;
    $egg.eq(i).css({
        transition: "2s cubic-bezier(1.000, 1.450, 0.185, 0.850)",
        transform: 'translateX('+ distance +'px)'
    }).find('div').css({
        transition: "2s cubic-bezier(1.000, 1.450, 0.185, 0.850)",
        transform: 'rotate(' + degree + 'deg)'  
    });
}

Answer 1

CSS3 Transition property is not supported in IE 9.0, it is supported from IE 10 onwards.so your animation is not working on IE 9.0.

But CSS3 transform property is supported from IE 9.0 onwards.

Official MDN Site