为什么无法使用JavaScript在CSS动画上更改速度

我制作了一个CSS动画和一些JavaScript代码来更新动画速度.似乎我的JavaScript代码是有效的,但是一旦在CSS中设置了速度,就无法再更新它.如果我没有在CSS中设置速度,那么JavaScript工作得很好.

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

如果上面的CSS中的最后两行被删除,则以下javascript有效

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

有关详细信息,请参阅此JS小提琴http://jsfiddle.net/usJv8/1/