我有一个简单的CSS滑块，在4个背景图像之间循环，但是它只在第一个循环中在图像之间闪烁;这是最重要的。我想大多数人不会把滑块看两遍。这里有一个链接，这样你就可以查看问题https://awesome-darwin-135a87.netlify.app，这里是CSS。
.hero {
background-color: var(--black);
background-image: url('./images/1.jpg');
height: 100vh;
background-position: center;
background-size: cover;
padding: 0.5rem calc((100vw - 1200px) / 2);
display: flex;
justify-content: flex-start;
align-items: center;
animation: slide 20s infinite;
}
@keyframes slide {
25%{
background-image: url('./images/2.jpg');
}
50%{
background-image: url('./images/3.jpg');
}
75%{
background-image: url('./images/4.jpg');
}
100%{
background-image: url('./images/1.jpg');
}
}
理想情况下，我想有一种方法来推迟HTML，直到图像加载，但可能有一个更简单的解决方案，我的问题。我已经尝试压缩图像文件，它减少了闪光灯的时间，但没有解决问题。我想到的另一个解决方案是将每个图像从黑色背景中淡出，这样它就不会闪烁，看起来更自然，但我不确定如何为一组图像实现两个动画。如有任何帮助，不胜感激。
尝试使用图像预加载，如示例所示，并使用渐进式图像。
<head>
...
<link rel="preload" href="./images/1.jpg" as="image" />
<link rel="preload" href="./images/2.jpg" as="image" />
<link rel="preload" href="./images/3.jpg" as="image" />
<link rel="preload" href="./images/4.jpg" as="image" />
</head>