循环背景图像在第一次运行时在图像之间闪烁

Question

我有一个动画来循环播放几个背景图片...

@keyframes loop-background { 
    0% { background-image: url('1.jpg'); } 
    17% { background-image: url('2.jpg'); } 
    34% { background-image: url('3.jpg'); } 
    51% { background-image: url('4.jpg'); } 
    68% { background-image: url('5.jpg'); } 
    85% { background-image: url('6.jpg'); } 
    100% { background-image: url('7.jpg'); } 
}

在第一次运行时，每张图片在加载时都会有短暂的闪光。然后闪光灯会消失。为什么？

我尝试了几种修复方法，包括对托管动画的元素应用不必要的变换，包括：

• position: static;
• will-change: background-image;
• -webkit-backface-visibility: hidden;
• -webkit-transform-style: preserve-3d;
• position: fixed; -webkit-transform: translate3d(0, 0, 0);一起

到目前为止，没有任何效果。

Answer 1

当然！因为图片加载需要一点时间。

我在主要的 div 前面添加了一个隐藏的 div，其中每个图像都设置为背景。

<div id="dummy" hidden></div>
<style>
#dummy {
    display: none; 
    background-image: url("1.jpg";), url("2.jpg";), url("3.jpg";), url("4.jpg";), url("5.jpg";), url("6.jpg";);">
}
</style>

Answer 2

迟到的答案，但将第一张图片放在最后似乎效果不错！

0% { background-image: url('1.jpg'); }