我正在尝试执行更改 div 类的背景图像动画。动画一开始似乎有效，当我更改类时动画完美完成。但是，当我在动画运行时再次更改类时，它会立即停止并设置最后一个类(没有动画)。
我对颜色而不是图像做了同样的事情，当我在动画运行时更改 div 类时，新动画与前一个动画“插值”。
有什么办法可以解决这个问题？？
这是一个片段，您可以在其中复制它:
.base-class {
transition: background linear 1s;
}
.base-class.green {
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Libya_(1977-2011).svg/1280px-Flag_of_Libya_(1977-2011).svg.png");
}
.base-class.lightblue {
background: 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 {
background: url("https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300");
}
.base-class.green2 {
background: green;
}
.base-class.lightblue2 {
background: lightblue;
}
.base-class.yellow2 {
background: yellow;
}
.base-class.my-class {
color: red;
font-size: 3em;
}<html>
<head>
</head>
<body>
<h1>With Images</h1>
<div>
<input type="button" value="clear" onclick="document.getElementById('target1').className = 'base-class';">
<input type="button" value="my-class" onclick="document.getElementById('target1').className = 'base-class my-class';">
<input type="button" value="green" onclick="document.getElementById('target1').className = 'base-class green';">
<input type="button" value="lightblue" onclick="document.getElementById('target1').className = 'base-class lightblue';">
<input type="button" value="yellow" onclick="document.getElementById('target1').className = 'base-class yellow';">
<br>
<div id="target1" class="base-class">
<br><br><br><br><br> Sample Text
<br><br><br><br><br>
</div>
</div>
<h1>With Colors</h1>
<div>
<input type="button" value="clear" onclick="document.getElementById('target2').className = 'base-class';">
<input type="button" value="my-class" onclick="document.getElementById('target2').className = 'base-class my-class';">
<input type="button" value="green" onclick="document.getElementById('target2').className = 'base-class green2';">
<input type="button" value="lightblue" onclick="document.getElementById('target2').className = 'base-class lightblue2';">
<input type="button" value="yellow" onclick="document.getElementById('target2').className = 'base-class yellow2';">
<br>
<div id="target2" class="base-class">
<br><br><br><br><br> Sample Text
<br><br><br><br><br>
</div>
</div>
</body>
</html>最佳答案
我在 Android 默认设置、iOS safari 和 Windows Chrome 浏览器中进行了测试，它们具有相同的行为(动画已完成，但不是在其他浏览器运行时)，但是在 Internet Explorer 中没有执行任何操作。
正如@Harry所说，“background-image”属性一开始不支持css动画，它可以在某些浏览器中工作，但它不是标准，所以我必须找到一个替代方案。
关于CSS3 背景(URL 图像)在其他动画运行时设置动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42396636/