CODEWITHSUNDEEP
javascripthtmlcssanimation
Philip Kirkbride
Philip Kirkbride

Reputation: 22899

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

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/

Upvotes: 5

Views: 148

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29715

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)

Upvotes: 2

Related Questions