IE8/9中的CSS3动画

Question

我知道CSS3动画在IE中不起作用.我只是想知道这个问题是否有JavaScript解决方法.

这是我想在IE中重新创建的链接:http://animation.kashoo.co.uk/

任何建议都会很棒.

Answer 1

快速搜索谷歌后,我发现了一个更改jQuery标准$ .animate()函数的jQuery插件,以便尽可能使用CSS3转换:

$ .animate增强

编辑:

在我的网站上尝试上述插件后,该网站破了.我不确定你是否会遇到同样的问题,但这是我的解决方法:

你需要Modernizr.js

基本上,您检查(使用Modernizr)浏览器是否支持给定功能,然后决定是否使用CSS3或Javascript进行动画处理.

例如:

(假设你是动画的一个对象向右移动200px)

if(Modernizr.csstransitions) {
    // use your appropriate browser prefixes
    yourDomObject.style.transition = 'left 2s';
    yourDomObject.style.left = parseInt(yourDomObject.style.left) + 200 + 'px'

} else {

    var left = parseInt($(yourDomObject).css('left')) + 200 + 'px';
    $(yourDomObject).animate({
        'left' : left
    },2000,'easeOutExpo');
}

Answer 2

有许多提供动画的 JQuery 插件。这是一个具有类似于您正在寻找的翻转效果的效果。http://lab.smashup.it/flip/