title: Set Webkit Keyframes Values Using Javascript Variable
body: <p>I have a piece of JS code to generate random numbers and output them as variables to be used here in place of the rotation values</p>
  
  <pre><code>@-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(-10deg);}
      100% {-webkit-transform: rotate(10deg);}
  }
  
  #dog{
  /*irrelevant settings*/
  -webkit-animation: rotate 5s infinite alternate ease-in-out;
  }
  </code></pre>
  
  <p>The code above works fine however when I try to stick the variables from the javascript into <code>rotate(variable);</code> I cannot get it to work. I am new to this so I'm 90% sure I just haven't got the syntax right for the variable (seriously I am terrible at remembering if something needs brackets, quotes, squigglys etc and I have tried all I can think of).</p>
  
  <p>Or it might be because the variable is local to the function and CSS cannot read that.</p>
  
  <p>So basically I just need some kind stranger to tell me the correct syntax and how to get CSS to read the variable if possible.</p>
  
  <p>Otherwise it looks like I will need the function to create the entirety of:</p>
  
  <pre><code>@-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(-10deg);}
      100% {-webkit-transform: rotate(10deg);}
  }
  </code></pre>
  
  <p>...which might be a bit messy since the random variable will likely be applied to multiple css elements.</p>
  
  <p>Oh and currently the variable is formatted to include the <code>deg</code> after the number so that is not the issue. In fact, for the sake of ease just assume I am using var dogValue = "20deg"; and forget the random element.</p>
  
  <p>Thanks.</p>