title: Animate background gradient change - javascript
body: <p>I'm trying to have a functioning background color change (change in the gradient dependent on a value) be smoother and "animated".
  Basically I am wondering where to put the animate code as my change in color exists in different ways (with a switch)</p>
  
  <p>Should it be within each case? or should it be in the function in which the switch is located?</p>
  
  <p>I tried to put the code to change the color there but it doesn't seem to work.</p>
  
  <p>Thanks.</p>
  
  <pre><code>document.getElementsByClassName('article-rating')[i].addEventListener('click', function() {
      sum = allSource2.reduce((tempSum, val) =&gt; tempSum + val);
      console.log(sum);
  
      switch (sum){
          case 1:
              document.body.style.backgroundImage.animate = "linear-gradient(45deg, #4A6ECF 0%, #B46E86 80%, #D76D6D 20%)";
          case 3:
              document.body.style.backgroundImage.animate = "linear-gradient(45deg, #4A6ECF 0%, #B46E86 20%, #D76D6D 90%)";
      }   
  });
  </code></pre>