CSS3背景（URL图像）在其他动画运行时设置动画

我正在尝试执行一个改变div类的背景图像动画。动画一开始似乎很好用，当我改变课程时，动画就完美地完成了。但是，当我在动画运行时再次更改类时，它会立即停止，并设置最后一个类（没有动画）

我对颜色而不是图像做了同样的操作，当我在动画运行时更改div类时，新动画与前一个动画“插值”

有办法解决这个问题吗

下面是一个片段，您可以在其中复制它：

。基类{
过渡：背景线性1s；
}
.base-class.green{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Libya_（1977-2011）.svg/1280px-Flag_of_Libai_（1977-2011）.svg.png”）；
}
.base-class.lightblue{
背景：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/2000px-F1_light_blue_flag.svg.png");
}
.base-class.yellow{
背景：url（“https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300");
}
.base-class.green2{
背景：绿色；
}
.base-class.lightblue2{
背景：浅蓝色；
}
.base-class.yellow2{
背景：黄色；
}
.基本舱，我的舱{
颜色：红色；
字号：3em；
}

带图像







示例文本






五颜六色







示例文本

我在Android默认浏览器、iOS safari浏览器和Windows Chrome浏览器中进行了测试，它有相同的行为（动画制作，但在另一个浏览器运行时没有），但在Internet Explorer中什么也没做

---

就像@Harry说的，“background image”属性一开始不支持css动画，它可以在某些浏览器中工作，但它不是一个标准，所以我必须找到一个替代方法。

实际上，将背景图像从一个源动画化（在您的例子中是过渡）到另一个源不是一个好主意。根据CSS规范，背景图像不是可设置动画或可转换的属性。请参阅此线程以了解潜在的陷阱-

。基类

没有

背景

属性。所以它无法设置动画。此外，正如@Harry提到的，

背景根据规范不可设置动画或转换。@LuudJacobs在“带图像”部分，如果您按下“绿色”按钮，颜色会突然设置，但如果您在绿色时按下“黄色”，您可以看到动画。另一方面，在“带颜色”部分，如果您按下“绿色”按钮，您将看到动画，然后当您按下“黄色”按钮时，您将看到下一个动画（如“带图像”）。例如，当您再次按“绿色”时，在动画结束之前，再次按“黄色”，在“带图像”部分，黄色到绿色动画停止，黄色颜色设置，但在“带颜色”部分，黄色到绿色的动画被“修改”，以黄色结束谢谢@Harry，我将检查它