性能：使用JS与SVG渐变动画CSS渐变

Question

我正在使用javascript来动画css background-image: radial-gradient()。当动画播放时，浏览器感觉有点滞后。

我想知道我是否将background-image: url()指向带有动画渐变的SVG文件，它会起作用吗？更重要的是，与使用javascript动画的css相比，它会表现得更好还是更差？

以下是我的javascript代码：

//value is calculated based on the progress of animation, i.e 0% to 100%
const start = value * (value - 75) / 25,//from 75 - 100
mid_black = value * (value - 50) / 19,//from 50 - 75
mid_white = value * (value - 2) / 24,//from 2 - 50
end_dim = value * (value - 2) / 22,//from 2 - 48
end = value * 21;//from 0 - before 5

//elm is the DOM element
elm.style.backgroundImage = 'radial-gradient(farthest-corner, hsla(186, 87%, 40%, 0) '+start+'%, hsla(186, 87%, 5%, .5) '+mid_black+'%, hsl(186, 87%, 80%) '+mid_white+'%, hsla(186, 87%, 40%, .2) '+end_dim+'%, hsla(186, 87%, 40%, 0) '+end+'%)';