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

我需要使用javascript创建和运行自定义css3动画。当我需要创建过渡我写的是这样的：如何使用javascript创建自定义关键帧css动画

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/ - 测试

来源

2012-03-19 SilentImp

http://jsfiddle.net/silentimp/273e2/1/ - 溶液 – SilentImp 2012-03-19 22:17:29

我喜欢这个解决方案许多。我希望看到它进一步发展，也许抽象成一个函数，它允许您以允许即时获取/设置的方式轻松访问您的“CSSKeyframeRules”。 – bodine 2012-07-29 00:41:36

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

source

或

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

来源

2013-08-13 08:57:00 vovkas

得到如下错误：'无法加载资源：在此服务器上找不到请求的URL。 file：/// Users/ks/Desktop/website/undefined' – 2014-12-08 01:34:28

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

回答

相关问题