CSS3动画在IE8 / 9 [英] CSS3 Animation in IE8/9

问题描述

我明白CSS3动画在IE中不工作。我只是想知道是否有一个JavaScript的解决方法为这个问题。

I understand that CSS3 animations do not work in IE. I was just wondering if there is a JavaScript workaround for this problem.

这里是一个链接到我想在IE重新创建： http://animation.kashoo.co.uk/

Here's a link to what I want to recreate in IE: http://animation.kashoo.co.uk/

任何建议

推荐答案

在快速的Google搜索之后，我发现了一个jQuery插件，它改变了jQuery的标准$ .animate将尽可能使用CSS3转换：

After a quick Google search I found a jQuery plugin that changes jQuery's standard $.animate() function so that it will use CSS3 transitions whenever possible:

$ .animate-enhanced

编辑：

现场破碎了。我不知道你是否会有同样的问题，但这里是我的解决方法：

After trying the above plugin on a site of mine, the site broke. I'm not sure if you will have the same problem or not, but here is my workaround:

你需要 Modernizr.js

You will need Modernizr.js

基本上，您检查（使用Modernizr）浏览器是否支持给定的功能，然后决定是否使用CSS3或Javascript进行动画处理。

Basically, you check (with Modernizr) whether the browser supports a given feature, and then decide whether to animate with CSS3 or Javascript.

例如：

对象向右移动200像素）

(Let's say you are animation an object to move to the right by 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');
}

这篇关于CSS3动画在IE8 / 9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！