Why can't speed be changed on CSS animation with JavaScript

Question

I've made a CSS animation and some JavaScript code to update the animation speed. It seems that my JavaScript code is valid but that once the speed is set in CSS it can no longer be updated. If I don't set the speed in CSS the JavaScript works perfectly fine.

#circle1 {
   width: 200px;
   height: 200px;
   background: blue;
   -webkit-animation: upDown 5s infinite;  /* Safari and Chrome */
   animation: upDown 5s infinite;
}

If the last two lines in the css above are removed the following javascript works

document.getElementById('circle1').style.webkitAnimationName = 'upDown';
document.getElementById('circle1').style.webkitAnimationDuration = '40s';

See this JS fiddle for more details http://jsfiddle.net/usJv8/1/

Answer 1

It looks like it's a rendering issue (you'd need to re-render the element to visualize the changes). I came with a "solution" that I don't know if it will work for you, as it is based on removing and then re-appending the element to the DOM:

document.getElementById('circle1').style.webkitAnimationDuration = '40s';

var aux = document.getElementById('circle1');
document.getElementById("maincenter").removeChild(document.getElementById('circle1'));
document.getElementById('maincenter').appendChild(aux);

You can see it working here: http://jsfiddle.net/usJv8/9/ (notice that I added an id to the center tag)