JavaScriptを使用して線形勾配率を変更するにはどうすればよいですか？

Question

私は徐々に直線勾配を使用して記入するために円の背景を作りたいと思います。私はCSSとJavaScrpitファイルを持っていますが、私はJSの線形グラデーションプロパティを選択する方法を理解できません。

<div id="circle" class="circleBase "></div> 
    #circle{ 
     width: 300px; 
     height: 300px; 
     background-color:blue; 
     background: linear-gradient(90deg, #FFC0CB 0%,white 100%); 
    } 

    function changeBackground() { 
     var elem = document.getElementById("circle"); 
     var width = 1; 
     var id = setInterval(frame, 10); 
     function frame() { 
      if (width >= 100) { 
       clearInterval(id); 
      } else { 
       width++; 
       elem.style = ???? 
      } 
     } 
    } 

Answer 1

ただ、それを文字列として定義します。

elem.style.background = 'linear-gradient(180deg, #FFC0CB 0%,white 100%)'; 

function changeBackground() { 
 
     var elem = document.getElementById("circle"); 
 
     var width = 1; 
 
     var id = setInterval(frame, 10); 
 
     function frame() { 
 
      if (width >= 100) { 
 
       clearInterval(id); 
 
      } else { 
 
       width++; 
 
       elem.style.background = 'linear-gradient(180deg, #FFC0CB 0%,white 100%)'; 
 
      } 
 
     } 
 
    } 
 
    
 

#circle{ 
 
     width: 300px; 
 
     height: 300px; 
 
     background-color:blue; 
 
     background: linear-gradient(90deg, #FFC0CB 0%,white 100%); 
 
    }

<div id="circle"></div> 
 
<button onclick="changeBackground()">Change!</button>