动画背景渐变更改-JavaScript

Question

我正在尝试使功能性背景颜色变化（取决于值的渐变变化）更加平滑和“动画化”。 基本上我想知道动画代码放在哪里，因为我的颜色变化以不同的方式（通过开关）存在

应该在每种情况下出现吗？还是应该在开关所在的功能中？

我试图在其中放置代码来更改颜色，但这似乎不起作用。

谢谢。

document.getElementsByClassName('article-rating')[i].addEventListener('click', function() {
    sum = allSource2.reduce((tempSum, val) => 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%)";
    }   
});