CSS关键帧图片轮播动画问题求助：衔接间隙与循环异常

Hey there! Let's break down and fix those two annoying problems with your image rotator animation. I’ve looked at your code and spotted a couple of key issues with how the animations are timed and looped.

Problem 1: Gap Between Sliding Images #

The tiny gap you’re seeing happens because your individual animations are out of sync with each other. Each image has a 3-second animation that loops independently, so when the first image finishes its exit animation, the second image’s entry doesn’t perfectly line up. Additionally, your initial positioning for the images (left: -450px) conflicts with the 0% keyframe (left: 450px), causing a slight jump when the animation starts.

Fix: Sync Animations to a Single Cycle #

Instead of making each animation 3 seconds long, set the total animation duration to 9 seconds (3 images × 3 seconds per image). This way, all animations share the same cycle length, so transitions line up perfectly. Adjust the keyframes to allocate exactly 3 seconds per image:

@keyframes imgRotator {
  /* Start off-screen right, hidden */
  0% { opacity: 0; left: 450px; }
  /* Fade in and slide to center, stay visible for 3 seconds */
  5%, 38.33% { opacity: 1; left: 0; }
  /* Fade out and slide to left, stay hidden */
  43.33%, 100% { opacity: 0; left: -450px; }
}

The percentages break down to:

• 0% to 5%: Entry slide (0.45 seconds)
• 5% to 38.33%: Visible state (3 full seconds)
• 38.33% to 43.33%: Exit slide (0.45 seconds)
• 43.33% to 100%: Hidden off-screen left (remaining time until next cycle)

Problem 2: Only the Third Image Loops #

This happens because each animation is looping independently. After the first full cycle (9 seconds), the first two images reset to their 0% state (off-screen right) but get stuck there, while the third image keeps looping. By syncing all animations to a 9-second cycle, they’ll all reset and restart together.

Fix: Update Animation Properties for All Images #

Change each image’s animation duration to 9 seconds, keep the delays, and make sure the initial state matches the animation’s hidden state to avoid jumps:

#slide-02 .image-rotator img {
  position: absolute;
  top: 0;
  left: 450px; /* Match 0% keyframe to avoid jump on animation start */
  opacity: 0; /* Start hidden */
  width: 100%;
  height: 100%;
}

#slide-02.animate .image-rotator img:nth-child(1) {
  animation: imgRotator 9s ease-in-out infinite 0s;
}
#slide-02.animate .image-rotator img:nth-child(2) {
  animation: imgRotator 9s ease-in-out infinite 3s;
}
#slide-02.animate .image-rotator img:nth-child(3) {
  animation: imgRotator 9s ease-in-out infinite 6s;
}

Bonus: Clarifying the Initial Rule vs Keyframe Conflict #

Your comment about the initial rule colliding with the 0% keyframe makes total sense! When you add the animate class, the browser switches from the initial left: -450px to the animation’s 0% left: 450px instantly, causing a jarring jump. By setting the initial left and opacity to match the 0% keyframe, we eliminate this jump entirely.

Full Modified CSS #

Putting it all together, here’s the updated CSS:

.slide {
  width: 100%;
  height: 100vh;
  position: relative;
}
#slide-02 .image-rotator {
  position: relative;
  width: 50%;
  max-width: 450px;
  height: 100%;
  overflow: hidden;
}
#slide-02 .image-rotator img {
  position: absolute;
  top: 0;
  left: 450px; /* Match animation start state */
  opacity: 0;
  width: 100%;
  height: 100%;
}
#slide-02.animate .image-rotator img:nth-child(1) {
  animation: imgRotator 9s ease-in-out infinite 0s;
}
#slide-02.animate .image-rotator img:nth-child(2) {
  animation: imgRotator 9s ease-in-out infinite 3s;
}
#slide-02.animate .image-rotator img:nth-child(3) {
  animation: imgRotator 9s ease-in-out infinite 6s;
}
@keyframes imgRotator {
  0% { opacity: 0; left: 450px; }
  5%, 38.33% { opacity: 1; left: 0; }
  43.33%, 100% { opacity: 0; left: -450px; }
}

This setup will give you a smooth, gap-free loop where all three images slide in and out in sequence, repeating infinitely once the animate class is added.

内容的提问来源于stack exchange，提问作者Whiskey T.