javascript - 如何使用 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";

并得到错误:Uncaught Error: SYNTAX_ERR: DOM Exception 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