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

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

i've made css animation , javascript code update animation speed. seems javascript code valid 1 time speed set in css can no longer updated. if don't set speed in css javascript works fine.

#circle1 { width: 200px; height: 200px; background: blue; -webkit-animation: updown 5s infinite; /* safari , chrome */ animation: updown 5s infinite; }

if lastly 2 lines in css above removed next javascript works

document.getelementbyid('circle1').style.webkitanimationname = 'updown'; document.getelementbyid('circle1').style.webkitanimationduration = '40s';

see js fiddle more details http://jsfiddle.net/usjv8/1/

it looks it's rendering issue (you'd need re-render element visualize changes). came "solution" don't know if work you, based on removing , re-appending element 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 working here: http://jsfiddle.net/usjv8/9/ (notice added id center tag)

javascript css html5 css3 animation