title: How may I create custom keyframe css animation with javascript
body: <p>I need to create and run custom css3 animation with javascript.
  When I need to create transition I write something like this:</p>
  
  <pre><code>element.style[Modernizr.prefixed('transform')] = 'rotateY(50deg)';
  </code></pre>
  
  <p>When I need animate element I should write</p>
  
  <pre><code>element.style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";
  </code></pre>
  
  <p>But I can't create keyframe for 'open' in the same way.
  Sure, I may write something like </p>
  
  <pre><code>document.creteElement("style").innerHTML = rule;
  </code></pre>
  
  <p>but this is dirty idea, so after reading <a href="https://stackoverflow.com/questions/5105530/programmatically-changing-webkit-transformation-values-in-animation-rules">programmatically changing webkit-transformation values in animation rules</a> I write this:</p>
  
  <pre><code>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";
  </code></pre>
  
  <p>​</p>
  
  <p>and get error: Uncaught Error: SYNTAX_ERR: DOM Exception 12</p>
  
  <p>What I am doing wrong and how may I do this more appropriate way? This look horrible.</p>
  
  <p><a href="http://jsfiddle.net/silentimp/273e2/" rel="nofollow noreferrer">http://jsfiddle.net/silentimp/273e2/</a> — test</p>