Dlaczego prędkość nie może zostać zmieniona na animacji CSS z JavaScriptem

Question

Zrobiłem animację CSS i trochę kodu JavaScript, aby zaktualizować prędkość animacji. Wygląda na to, że mój kod JavaScript jest prawidłowy, ale po ustawieniu prędkości w CSS nie można go już aktualizować. Jeśli nie ustawię prędkości w CSS, JavaScript działa doskonale.

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

Jeśli ostatnie dwie linie w css powyżej usuwane są następujące prace javascript

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

Zobacz ten JS skrzypce Więcej szczegółów http://jsfiddle.net/usJv8/1/

Answer 1

Wygląda na to, że jest to kwestia renderowania (ty musi ponownie renderować element, aby wizualizować zmiany). I przyszedł z „rozwiązanie”, że nie wiem, czy to będzie pracować dla Ciebie, gdyż opiera się na usunięcie i ponowne dodanie elementu do DOM:

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

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

widać to działa tutaj : http://jsfiddle.net/usJv8/9/ (zauważ, że dodałem identyfikator do środkowego tagu)