插入 css 动画 Internet Explorer javascript答案

【问题标题】：Insert css animation internet explorer javascript插入 css 动画 Internet Explorer javascript
【发布时间】：2013-03-30 13:21:24
【问题描述】：

我想在 Internet Explorer 中插入带有 javascript 的动画。似乎不起作用。用chrome，ff没问题。请查看以下链接：

var style = document.documentElement.appendChild(document.createElement("style")),

rule="@keyframes test{ 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} ";
style.sheet.insertRule(rule);

$(".mojo")[0].style["animation"] = " test 3s ease-out both infinite";

http://jsfiddle.net/273e2/17/

动画是否适用于 IE10。在运行时插入动画似乎不起作用。

【问题讨论】：

您使用的是哪个版本的 Internet Explorer？动画应该只能在 Internet Explorer 10 中运行。
您在哪个 IE 中测试？ IE8 及更低版本不支持完整的 CSS3。
@Vucko IE9 和 10 都不支持。具体来说，IE9 也不支持动画...
您可能还对stackoverflow.com/questions/11923368/… 和stackoverflow.com/questions/9060223/… 感兴趣
@MaxArt 我知道，但 OP 没有提到 IE 正在测试哪个。 IE9与IE8相比是一艘星际飞船。您可以使用css3 test 支持 css3。

标签： javascript internet-explorer

【解决方案1】：

insertRule 方法需要两个值；第一个是新规则字符串，第二个是您希望将其添加到其他规则中的索引。

0 的索引会将规则推到顶部，与规则总数相等的索引会将其推到规则的底部。

// Add a new rule to the bottom of the first stylesheet
sheet.insertRule( rule, sheet.rules.length );

将此索引添加到您的演示可解决问题：http://jsfiddle.net/273e2/19/show/

【讨论】：

@Abc It made all the difference;我在 IE10 中打开了您的演示，但它不起作用。我添加了一个索引，并修复了它。
好的，我明天试试。我想我已经尝试过了。
@Abc 你能确认这个解决方案吗？