Html 为什么我的滑块在第一轮中闪烁？

我的滑块在第一轮滑动时会闪烁，之后会完美地滑动而不闪烁。如何消除闪烁

我的代码：

HTML:

第一轮幻灯片有这样的效果，它不是平滑的，在第一轮之后，其他的一轮正好显示了我想要的效果。。需要帮忙吗？对不起，如果帖子不好，我第一次在这里写信。多谢各位

---

我试图使滑块全屏显示，但闪烁保持不变，在第一轮中是白色闪烁，在第一轮后幻灯片项目之间没有白色闪烁

正如我在评论中提到的，闪烁是由于第一轮中尚未加载图像造成的。您可以尝试通过将图像添加为来预加载图像

---

它会闪烁，因为第一轮没有加载图像。在接下来的几轮中，图像已经加载，所以没有闪烁。有没有办法解决这个加载问题，让刚到网站的用户不会体验到这种闪烁？兄弟，我对这种东西很陌生，我浪费了半天时间试图通过谷歌自己解决这个问题。非常感谢，这很有帮助。现在我将永远知道这种情况的解决方案！StackOverflow对学习来说确实很棒！谢谢x100

<div class="slider"></div>

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #444;
}

.slider {
    width: 600px;
    height: 400px;

    margin: 100px auto;

    background-image: url(image/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    animation: slide 12s infinite;
    transition: 600ms;

    box-shadow: 0 0px 50px rgba(0, 0, 0, 1), inset 0 0px 400px rgba(0, 0, 0, .6);
    border-radius: 5px;
}

@keyframes slide {
    20% {
        background-image: url(image/2.jpg);
    }
    40% {
        background-image: url(image/3.jpg);
    }
    60% {
        background-image: url(image/4.jpg);
    }
    80% {
        background-image: url(image/5.jpg);
    }
    100% {
        background-image: url(image/1.jpg);
    }
}