How can I transition CSS values using JavaScript? I made this code, but it isn't working:
var num = 100;
function fillDiv{
var a=document.getElementById("principal");
for (var i = 0; i<100; i++){
num=num-25;
a.style.background="-moz-radial-gradient(#FFFFFF "+num+"%, #006699 200%);";
if (num==0){
break;
}
}
In the debug window all gone good, but when I check it on elements tag the value hasn't changed.
As explained in comments, the
for
loop is too quick to notice the effect, Instead you may useinterval
, set the interval period to40
this is like25
frames per second, also made the step10
instead of4
innum = num - 10;
so that the animation will look smooth and noticeable like below:JS Fiddle