Javascript使用CSS3转换为样式更改设置动画

我有一个具有背景渐变的div，其值是使用javascript动态设置的。有时，我需要更改渐变值（可以是颜色或颜色停止位置）。我想在不使用javascript的情况下设置这些更改的动画（别误会，我使用javascript设置了渐变值，但我想使用CSS3设置动画）。我尝试设置一个

transition

属性，就像使用CSS一样。这里是一个MWE：

函数getPercent（）{ 返回Math.random（）*100； } 设置间隔（（）=>{ const per=getPercent（）； document.getElementById（'foo'）.style.background= `线性梯度（向右，#aebcbf 0%，#aebcbf${per}%，#0a0e0a${per}%，#0a0e0a 100%` }，1000）

.container{
过渡：所有的1容易；
背景：线性梯度（向右，#aebcbf 0%，#6e7774 50%，#0a0e0a 51%，#0a0809 100%）；
宽度：150px；
高度：10px；
}

希望这是有用的

background: linear-gradient(269deg, #ffffff, #ff0000);
background-size: 400% 400%;
-webkit-animation: AnimationName 23s ease infinite;
-moz-animation: AnimationName 23s ease infinite;
-o-animation: AnimationName 23s ease infinite;
animation: AnimationName 23s ease infinite;
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

• 参考：

有关CSS转换的更多信息，请查看此

---

不幸的是，

背景图像无法设置动画（更多）。因此，设置CSS渐变动画是一个问题

要使用纯CSS解决此问题，您可以创建一个包含新渐变的
：before
。将其设置为
不透明度：0
，并在需要显示新渐变时将其更改为
不透明度：1

最终我们可以做到以下几点：


.container{
宽度：150px；
高度：10px；
背景：线性梯度（向右，#aebcbf 0%，#6e7774 50%，#0a0e0a 51%，#0a0809 100%）；
位置：相对位置；
z指数：100；
}
.货柜：在{
背景：线性梯度（向右，#aebcbf 0%，#6e7774 10%，#0a0e0a 51%，#0a0809 100%）；
内容：''；
显示：块；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
宽度：100%；
z指数：-100；
过渡：不透明度0.45s；
}
.容器：悬停：之前{
不透明度：1；
}
或@evolutionxbox的可能重复我希望这些值来自javascript，正如最后一次编辑现在所演示的，问题是从2011年开始的。问题的日期在这种情况下并不重要。有你的答案。CSS渐变仍然是不可设置动画的属性（过渡）。这应该是一个注释，因为你没有回答这个问题。这更好，但它仍然没有回答这个问题。OP希望使用JS设置渐变动画。你可以更改容器和before元素的线性渐变。它们可以是完全动态的。