如何使用变量更改css来制作动画

Question

如何使用JavaScript转换CSS值？我做了这个代码，但它不起作用：

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;
    }
 }

在调试窗口中，一切都很好，但当我在elements标记上检查它时，值没有改变。

Answer 1

正如评论中所解释的，for循环太快而没有注意到效果，相反，您可以使用interval，将间隔周期设置为40，这就像每秒25帧，还使步骤10而不是num = num - 10;中的4，这样动画看起来会像下面这样平滑和引人注目：

JS Fiddle

var num = 100;
var $interval = setInterval(function() {
  var a = document.getElementById("principal");
  num = num - 10;
  if (num >= 0) {
    a.style.background = '-moz-radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
    a.style.background = '-webkit-radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
    a.style.background = 'radial-gradient(#FFF ' + num + '%,#1e69de 200%)';
  } else {
    clearInterval($interval);
  }
}, 40);

body {
  margin: 0;
  padding: 0;
}
#principal {
  width: 100vw;
  height: 100vh;
  display: block;
  background-color: #1e69de;
  margin: 0 auto;
}

<div id="principal"></div>