javascript - IE9 不支持 css/jquery 动画 - 需要解决方法

Question

我有以下动画在 IE9 中不起作用，因为不支持过渡属性。

不幸的是，我必须让它在 IE9+ 上工作。

有人知道任何修复/解决方法吗？

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 属性在 IE 9.0 中不受支持，从 IE 10 开始支持。因此您的动画无法在 IE 9.0 上运行。

但是 CSS3 transform 属性从 IE 9.0 开始支持。

Official MDN Site