title: Updating animation-duration in Javascript
body: <p>After changing the <code>animation-duration</code> (or in this case, <code>-webkit-animation-duration</code>) property via JavaScript with <code>setProperty("-webkit-animation-duration", value + "s")</code>, I see the change in the element inspector in Chrome, but the actual animation speed doesn't change. In addition, if I manually change the value in the element inspector, there is no change either.</p>
  
  <p>I've got an input field set up to take an animation speed value, which is connected to the following event listener (<code>orbitFactor</code> is a global var defined elsewhere):</p>
  
  <pre><code>function updateSpeed(event) {
       var planetDiv = document.getElementById(event.target.id);
       planetDiv.style.setProperty("width", event.target.value / orbitFactor);
       planetDiv.style.setProperty("height", event.target.value / orbitFactor);
       planetDiv.style.setProperty("-webkit-animation-duration", event.target.value + "s");
  }
  </code></pre>
  
  <p>The event listener is definitely getting called, and the <code>-webkit-animation-duration</code> value does change in the element inspector, but the speed of the animation doesn't. Is there something I'm missing here with regards to <code>-webkit-animation-duration</code>? The other properties I'm changing (e.g. <code>width</code> and <code>height</code>) using the same method do change visibly.</p>
  
  <p>Thanks in advance</p>
  
  <p>EDIT: Note that this is a problem in Chrome 40, but it works properly in Chrome 42 and Firefox 35.</p>