Warum kann nicht Geschwindigkeit in CSS-Animation mit JavaScript geändert werden

Question

Ich habe eine CSS-Animation und einige JavaScript-Code, um die Animationsgeschwindigkeit zu aktualisieren. Es scheint, dass mein JavaScript-Code gültig ist, aber sobald die Geschwindigkeit in CSS eingestellt ist, kann es nicht mehr aktualisiert werden. Wenn ich die Geschwindigkeit nicht in CSS einstelle funktioniert das JavaScript einwandfrei.

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

Wenn die letzten beiden Zeilen in der obigen CSS entfernt sind die folgenden JavaScript

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

Werke sehen diese Geige für mehr Details JS http://jsfiddle.net/usJv8/1/

Answer 1

Es sieht aus wie es ein Rendering-Problem ist (Sie würde das Element erneut rendern müssen, um die Änderungen zu visualisieren. Ich kam mit einer „Lösung“, die ich weiß nicht, ob es für Sie arbeiten, wie es zum Entfernen und dann erneut Anfügen des Elements auf das DOM basiert:

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

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

Sie können es sehen, hier zu arbeiten : http://jsfiddle.net/usJv8/9/ (Beachten Sie, dass ich eine ID zum Center-Tag hinzugefügt habe)