Html 转换后CSS背景图像闪烁

首先，我想说，我知道有人问过类似的问题，我在谷歌的前几页上看到了所有我能找到的问题，但我运气不好

问题：

我有一个带有div的登录页，它可以扩展屏幕的宽度，并使用CSS转换在5个不同的图像之间淡入淡出。它们的大小和长宽比都相同，所以我知道这不会有问题。图像之间的交叉淡入淡出是平滑的，但一旦过渡完成，它们就会闪烁，然后过渡到下一个图像开始（再次平滑）

我做了一些事情来尝试修复它：

• 保存所有图像以供本地参考
• 调整了所有图像的大小，使其具有相同的大小和纵横比
• 在JS中添加了一个简单的图像预加载脚本（可在答案中找到）
• 在两次转换之间提供了更多的时间，以允许一些加载时间宽松
• 缩小所有图像的比例，以防它们由于文件大小而加载缓慢
• 在Firefox、Opera和Edge中尝试过，但存在相同的问题（添加了特定于浏览器的属性）

我不知道在这一点上该怎么办，但我知道有一些更聪明的人可能会有一个解决方案，所以我要感谢那些提供建议的人给了我帮助

.container的CSS**/ .集装箱{ 显示器：flex； 宽度：100%！重要； 填充：1rem0； 保证金：0； 高度：100vh； 证明内容：中心； } /***容器幻灯片的CSS***/ .容器幻灯片{ 左边距：0； 右边距：0； 背景尺寸：封面； 背景重复：无重复； 背景位置：中心； 动画：动画幻灯片28秒轻松无限； } /***CSS动画***/ @关键帧动画幻灯片{ 0% { 背景图像：url（'http://lorempixel.com/600/600'); } 25% { 背景图像：url（'http://lorempixel.com/600/600/sports'); } 50% { 背景图像：url（'http://lorempixel.com/600/600/city'); } 75% { 背景图像：url（'http://lorempixel.com/600/600/animals'); } 100% { 背景图像：url（'http://lorempixel.com/600/600/people'); } }

欢迎来到Lorem Impsum，
这只是一些示例文本。

根据我的假设，从100%到0%之间没有背景，我建议您将初始背景添加到100%，然后再添加一个步骤，这样就可以重新开始

比如：

@关键帧动画幻灯片{
0% {
背景图像：url（'http://lorempixel.com/600/600');
}
20% {
背景图像：url（'http://lorempixel.com/600/600/sports');
}
40% {
背景图像：url（'http://lorempixel.com/600/600/city');
}
60% {
背景图像：url（'http://lorempixel.com/600/600/animals');
}
80% {
背景图像：url（'http://lorempixel.com/600/600/people');
}
100% {
背景图像：url（'http://lorempixel.com/600/600');
}
}

---

这样，它在开始的地方结束，你不会注意到任何闪烁。

我似乎无法从你给出的代码中重现这一点。对我来说很好。您能提供一个显示问题的最小工作示例吗？@Zac已编辑以添加示例闪烁在动画期间发生。但我肯定会这样做，因为它至少会在最后修复这一严酷的过渡。谢谢我看到的是，它发生在100%到0%之间，基本上是在动画重新启动时。你可以玩percanties。还有可能图像还没有加载吗？检查编辑我刚才添加了一些新内容，谈到这一点，我添加了该问题的GIF。我猜这就是问题所在，所以我将编写一个更好的JS图像预加载程序，看看这是否能解决问题。感谢您的快速回复！我很确定这是一个图像加载问题。检查网络选项卡，查看闪烁是否与图像加载一致。此外，在这种情况下，映像是远程的，这会由于HTTP请求而导致加载速度变慢。