JavaScriptでカスタムキーフレームCSSアニメーションを作成するには

Question

javascriptでカスタムcss3アニメーションを作成して実行する必要があります。 私はトランジションを作成する必要がある場合、私はこのような何か書く：

element.style[Modernizr.prefixed('transform')] = 'rotateY(50deg)'; 

私は要素をアニメーション化する必要があるとき、私は

element.style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite"; 

を書く必要があります。しかし、私は同じように「オープン」のためのキーフレームを作成することはできませんが。 確かに、私は

document.creteElement("style").innerHTML = rule; 

ような何かを書くかもしれませんが、programmatically changing webkit-transformation values in animation rulesを読んだ後、私はこの書き込みので、これは、汚れた考えです：

var style = document.documentElement.appendChild(document.createElement("style")), 
index = Modernizr._prefixes.length, 
rule = ""; 

while(index--){ 
    rule+="@"+Modernizr._prefixes[index]+"keyframes 'test'{ 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} "; 
} 

style.sheet.insertRule(rule); 
$(".mojo")[0].style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite"; 

とエラーが出る：不明なエラー：SYNTAX_ERRを： DOM例外12

私が間違っていることと、これをより適切な方法で行う方法はありますか？これは恐ろしい。

http://jsfiddle.net/silentimp/273e2/ - テスト

Answer 1

var keyframes = "@-webkit-keyframes{...}"; 
var s = document.createElement('style'); 
s.innerHTML = keyframes; 

source

又は

https://github.com/krazyjakee/jQuery-Keyframes