平滑的背景图像动画（防止闪烁）

Question

我要在三个背景图像之间进行动画处理。我将按照以下步骤进行操作。

但是，我发现有时（第一次加载页面时）图像闪烁。因此，除了平滑过渡之外，发生的是图像1闪烁然后平滑淡出，然后图像2闪烁然后平滑过渡。

如何避免这种闪烁？有没有办法等待图像完全加载后再开始动画？还是那不是问题？

{{1}}

Answer 1

正如@vxpin在评论中指出的那样，我发现这非常有帮助。

https://stackoverflow.com/a/52358326/4262057

基本上，您可以如下预加载所有图像：

.stylename {
  background-image: 
   url('http://www.BungalowSoftware.com/images/silver-background.jpg'),
   url('http://www.BungalowSoftware.com/images/silver-background2.jpg');
}