Html 全屏图像滑块在花费时间后重复

。幻灯片放映{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：0；
列表样式：无；
保证金：0；
填充：0；
}
.幻灯片李{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景尺寸：封面；
背景位置：50%50%；
背景重复：无；
不透明度：0；
z指数：0；
动画：imageAnimation 60s线性无限；
}
.幻灯片李：第n个孩子（1）{
背景图像：url（“https://www.w3schools.com/howto/img_fjords.jpg")
}
.幻灯片李：第n个孩子（2）{
背景图像：url（“https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg");
动画延迟：10秒；
}
.幻灯片李：第n个孩子（3）{
背景图像：url（“https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg");
动画延迟：20秒；
}
.幻灯片李：第n个孩子（4）{
背景图像：url（“http://eskipaper.com/images/image-2.jpg");
动画延迟：30秒；
}
@关键帧图像动画{
0% {
不透明度：0；
动画计时功能：轻松自如；
}
10% {
不透明度：1；
动画计时功能：放松；
}
20% {
不透明度：1
}
30% {
不透明度：0
}
}
.没有cssanimations.幻灯片放映李{
不透明度：1；
}

""


""


""


""

正如您在上面看到的，我将

60s

更改为

40s

，这就是造成临时白色背景的原因

更新：

如我们所见，第二个

动画延迟在
10s
之后开始，第三个在
20s
之后开始，第四个在
30s
之后开始

如果
动画
中的总时间为
60秒
，则第四个动画中发生事务的总持续时间为
30秒
，即从30秒到60秒

这就是为什么，在第四张图片之后，你会看到白色的屏幕


。幻灯片放映{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
z指数：0；
列表样式：无；
保证金：0；
填充：0；
}
.幻灯片李{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景尺寸：封面；
背景位置：50%50%；
背景重复：无；
不透明度：0；
z指数：0；
动画：imageAnimation 40s线性无限；
}
.幻灯片李：第n个孩子（1）{
背景图像：url（“https://www.w3schools.com/howto/img_fjords.jpg")
}
.幻灯片李：第n个孩子（2）{
背景图像：url（“https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg");
动画延迟：10秒；
}
.幻灯片李：第n个孩子（3）{
背景图像：url（“https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg");
动画延迟：20秒；
}
.幻灯片李：第n个孩子（4）{
背景图像：url（“http://eskipaper.com/images/image-2.jpg");
动画延迟：30秒；
}
@关键帧图像动画{
0% {
不透明度：0；
动画计时功能：轻松自如；
}
10% {
不透明度：1；
动画计时功能：放松；
}
20% {
不透明度：1
}
30% {
不透明度：0
}
}
.没有cssanimations.幻灯片放映李{
不透明度：1；
}


""


""


""


""

我的代码与您提供的代码有什么区别？我的问题是在显示第四张图像后的某个时间内显示空白页。我想连续播放图像幻灯片，而不显示空白页。您能告诉我为什么会发生这种情况吗？请
.slideshow li{
    animation: imageAnimation 40s linear infinite;
}