How can I create my own animation of css frames of a keyframe using javascript

Question

I need to create and run custom css3 animation using javascript. When I need to create a transition, I write something like this:

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

When I need animate element, I have to write

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

But I cannot create a keyframe for 'open' in the same way. Of course I can write something like

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

but this is a dirty idea, so after reading the programmatic changes to the webkit translation values ​​in the animation rules, I write this:

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

and get error message: Failed to get error: SYNTAX_ERR: DOM 12 exception

What am I doing wrong, and how can I do this in a more appropriate way? It looks awful.

http://jsfiddle.net/silentimp/273e2/ - test

Answer 1

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

source

or

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