4

我需要使用 javascript 创建和运行自定义 css3 动画。当我需要创建过渡时，我会写如下内容：

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

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

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

但我不能以同样的方式为“打开”创建关键帧。当然，我可以写类似

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

但这是一个肮脏的想法，所以在阅读了动画规则中以编程方式更改的 webkit-transformation 值之后，我写了这个：

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";

​</p>

并得到错误：未捕获的错误：SYNTAX_ERR：DOM Exception 12

我做错了什么，我该如何做更合适的方式？这看起来很可怕。

http://jsfiddle.net/silentimp/273e2/ — 测试

4

1 回答 1

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

资源

或者

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

于 2013-08-13T08:57:00.910 回答