在IE8 CSS3动画/ 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/

任何意见将是巨大的。

推荐答案

一个快速谷歌搜索，我发现一个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增强

编辑：

试穿我的网站上述插件后，现场爆发。我不知道如果你有同样的问题或没有，但这里是我的解决方法：

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

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