IE8/9 中的 CSS3 动画

Posted 2023-03-06

【中文标题】IE8/9 中的 CSS3 动画

【英文标题】：CSS3 Animation in IE8/9

【发布时间】：2012-06-06 23:01:29

【问题描述】：

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

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

任何建议都会很棒。

【问题讨论】：

***.com/q/5612352/504930的可能重复

你应该选择哪个答案解决了你的问题:)

【参考方案1】：

在谷歌快速搜索后，我发现了一个 jQuery 插件，它改变了 jQuery 的标准 $.animate() 函数，以便它尽可能使用 CSS3 过渡：

$.animate-enhanced

编辑：

在我的网站上尝试了上述插件后，该网站崩溃了。我不确定您是否会遇到同样的问题，但这是我的解决方法：

你需要Modernizr.js

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

例如：

（假设您正在动画对象向右移动 200 像素）

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

【参考方案2】：

查看 jQuery 的动画函数： http://api.jquery.com/animate/

【参考方案3】：

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