JS修改<div>背景后CSS动画失效问题求助

你遇到的问题核心在于：当通过滑块动态修改背景渐变时，使用了background简写属性，导致浏览器将background-size重置为默认值auto，覆盖了.animated类中的设置。

为什么会发生这种情况？ #

background是CSS简写属性，当你用JS设置element.style.background = 新渐变时，浏览器会将所有未在简写中指定的背景子属性（比如background-size）重置为初始值。虽然.animated类里有background-size: 200% 200%，但由于内联样式的优先级特性，浏览器会优先使用简写带来的默认值，直接导致动画所需的background-size失效。

修复方案 #

把动态修改背景的方式从设置background改为设置background-image，这样只会替换渐变图像，不会影响background-size、background-position等其他属性，.animated类的规则就能正常生效了。

举个例子，假设你的JS代码原本是这样的：

element.style.background = `linear-gradient(92deg, ${color1}, ${color2}), linear-gradient(92deg, ${color3}, ${color4})`;

改成：

element.style.backgroundImage = `linear-gradient(92deg, ${color1}, ${color2}), linear-gradient(92deg, ${color3}, ${color4})`;

额外验证 #

确保.animated类始终被应用在目标元素上，没有在滑块事件中被意外移除。只要类的状态保持正常，修改background-image后，background-size: 200% 200%会持续生效，动画就能正常循环播放了。

内容的提问来源于stack exchange，提问作者Pedro Angelo