在 IE9+ 中使用 CSS3 动画答案

【问题标题】：Using CSS3 Animations in IE9+在 IE9+ 中使用 CSS3 动画
【发布时间】：2012-02-22 00:45:45
【问题描述】：

我今天已经尝试让这些 css3 动画在 IE9 中工作几个小时，但我被难住了！

我尝试实现一些 JavaScript 回退，但我的知识非常有限，因此它们失败了。我不确定它是否由于我的用户错误或代码错误而失败。

到目前为止，这是我的代码的 jsFiddle，我已经用颜色替换了背景图像。基本上，绿色和黑色方块在 Firefox 和 Webkit 浏览器中会旋转。

我也想让它在 IE9 上运行。

如果您能帮我解决这个问题，我将不胜感激！

【问题讨论】：

CSS3 过渡和动画在 IE9 中不起作用。它们应该在 IE10 中工作。
他们确实可以在 IE9 中使用 jQuery 库来工作。我只是不知道如何实现这一点。 addyosmani.com/blog/css3transitions-jquery
不完全:)。该插件测试过渡支持，如果检测到支持，则使用纯 CSS 过渡。否则它使用 jQuery 的内部动画函数来执行动画。该插件在 IE9 中不启用 CSS3 过渡，并且 jQuery 本身不支持旋转动画。您需要使用这样的插件：zachstronaut.com/posts/2009/08/07/…，但这不会按照您的链接执行后备类型的内容。所以如果它必须在 IE9 中工作，不要担心原生 CSS3 的东西，只需使用这个插件在 JS 中完成所有动画。
嗯，我试过你发布的链接。我似乎无法让它工作。你能帮我实现这个吗？
IE10 即将在 Windows 7 中推出，因此有机会在这个流行的系统中提供更多工作功能。

【解决方案1】：

我会使用Modernizr 来检测何时不支持 css 动画。使用 Modernizr，就这么简单：

if(!Modernizr.cssanimations) {
    //jQuery fallback 
}

至于使用 jQuery 旋转，我会使用：http://jqueryrotate.com/

【讨论】：