title: appending css3 @keyframes won't work in safari
body: <p>this is tricky to explain so forgive me if i ramble a bit.</p>
  
  <p>with js/jquery i am creating a style to append to the document header once i can determine that width of the element that will contain the animation.  for instance, i have some clouds that slide across the sky so i need to know how wide the viewport is so they cover the entire screen with the animation.  once i have the style variable defined (style) i am appending the head element with it like this:</p>
  
  <pre><code>$('html &gt; head').append(style);
  </code></pre>
  
  <p>this works perfectly in chrome and firefox but safari straight up refuses to work.  i tried it a slightly different way:</p>
  
  <pre><code>$('head').append('&lt;style type="text/css"&gt;*@keyframe attributes here*&lt;/style&gt;');
  </code></pre>
  
  <p>again, works fine in chrome and firefox but safari doesn't see it.  before you ask, yes, i am using the -webkit- vendor prefix and yes, it's listed before the non-vendor specific @keyframes attribute :)</p>
  
  <p>so then i tried the jquery keyframes plug-in with the exact same result.  it works perfectly in chrome and firefox but not safari.  but ONLY with the keyframes.</p>
  
  <p>i have searched and searched for anyone else with this issue but all i can find are countless threads about making sure to use the proper vendor prefixes in the proper sequence (which i have done).</p>
  
  <p>if i hardcode the keyframes into the css file they work fine but obviously that does me no good as i cannot specify the proper width for the animations.  i need to work on widths (not %) because of looping animations and offsets (it's complicated).</p>
  
  <p><em>EDIT</em>
  here is a sample of the style var that i am appending to the header.  perhaps safari is particular about the formatting?</p>
  
  <pre><code>&lt;style&gt;
  @-webkit-keyframes charmove { from { -webkit-transform : translateX(0px); } to { -webkit-transform : translateX('+winWidth+'px); }}
  @keyframes charmove { from { transform : translateX(0px); } to { transform : translateX('+winWidth+'px); }}
  &lt;/style&gt;
  </code></pre>
  
  <p>i tried it, also, without adding the -webkit- on the transform element as well.  same result.</p>