插入CSS動畫Internet Explorer Javascript

Question

我想在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一起使用。 在運行時插入動畫似乎不起作用。

Answer 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/