如何在CSS关键帧动画中更改图像？

Question

只需尝试从一个图像到下一个进行简单的图像转换，即可根据需要进行多达多个图像。尝试使用此横幅教程，但没有加载图像

background:url(/images/newnew.jpg) repeat-x;

因此，如果您知道如何在设定的时间间隔内简单地更改图像，我将不胜感激。

Answer 1

根据Mozilla网站（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties）的这篇文章，background-image属性不可动画。

如果您想随时更改框的background-image，则需要使用脚本。

......如果你生活在20世纪90年代后期，你也可以打电话给HTML+TIME（但我们不再谈论它了。）

Answer 2

虽然它不是webkit规范的一部分，但是可能在某些浏览器上更改背景（但不是全部，因此这种方法不是推荐的路径）。对于可向后兼容的站点，建议将图像放在具有宽度和宽度的不可点击的div中。两个图像的高度均为100％，而不是整个div的背景。

可以使用悬停工作，如this page所示。

#background {
margin:0 auto;
transition: background-image 1s ease-in-out;
background-image:url("/images/bg.jpg");}

将其与其中一个关键帧转换教程相结合，可以让您转换背景。