Question

我需要使用javascript创建和运行自定义css3动画。当我需要创建转换时，我会写下这样的内容：

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

当我需要动画元素时，我应该写

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

但我不能以同样的方式为'open'创建关键帧。当然，我可能会写类似

的内容

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

如何使用javascript创建自定义关键帧css动画

1 个答案: