问IE9不支持css / jquery动画-解决方案需要

EN

.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;
}

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

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