幻灯片动画Bug排查：3张幻灯片循环出现空白背景问题

I see the problem—your slider has a timing gap between the third slide and the first slide's next cycle, which causes that blank background. Let's fix this by aligning the animation delays and keyframe timings perfectly for a 3-slide loop.

Corrected Code #

Here's the adjusted CSS that eliminates the gap:

/* Slider */
.slider {
 display: block;
 height: 100%;
 width: 100%;
 z-index: -1;
 background-color: #1f1f1f;
 overflow: hidden;
 position: absolute;
 top: 0px;
 right: 0px;
 border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
 position: absolute;
 display: block;
 width: 100%;
 height: 100%;
 background-color: #1f1f1f;
 animation: slide 12s infinite;
 overflow: hidden;
}
.slide:nth-child(1) {
 left: 0%;
 animation-delay: -1s;
 background-image: url(img/slide1.jpg);
 background-size: cover;
 background-position: center;
}
.slide:nth-child(2) {
 left: 100%;
 animation-delay: 3s;
 background-image: url(img/slide2.png);
 background-size: cover;
 background-position: center;
}
.slide:nth-child(3) {
 left: 100%;
 animation-delay: 7s;
 background-image: url(img/slide3.jpg);
 background-size: cover;
 background-position: center;
}
.slide p {
 font-size: 2rem;
 text-align: center;
 display: inline-block;
 width: 100%;
 margin-top: 340px;
 color: #fff;
}
@keyframes slide {
 0% { left: 100%; width: 100%; opacity: 1;}
 8.33% { left: 0%;} /* Finish entering after 1 second */
 33.33% { left: 0%;} /* Stay visible until 4 seconds into the animation */
 41.66% { left: -100%; width: 100%; opacity: 1;} /* Finish exiting after 5 seconds */
 41.67% { left: -100%; width: 0%; opacity: 0;}
 100% { left: 100%; width: 0%; opacity: 0;}
}

The HTML stays exactly as you have it—no changes needed there.

Why This Works #

The original issue was a timing mismatch: your 12-second animation wasn't evenly split across 3 slides, leaving a gap after the third slide finished. Here's what we adjusted:

1. Keyframe Timings: We split the 12-second animation into 3 equal 4-second blocks (one per slide). Each slide takes 1 second to enter, stays visible for 2 seconds, then takes 1 second to exit.
2. Animation Delays: We shifted each slide's start time so they overlap smoothly:
   • Slide 1 starts 1 second early to be visible immediately when the page loads.
   • Slide 2 starts entering just as Slide 1 begins exiting.
   • Slide 3 starts entering just as Slide 2 begins exiting.
   • Slide 1's next cycle starts entering just as Slide 3 finishes exiting, closing the loop perfectly.

This ensures there's never a moment without a slide visible on screen.

内容的提问来源于stack exchange，提问作者Jiří Nováček