循环文本轮播的关键帧动画问题排查

Hey Liz, this is such a common headache with infinite carousels—great call suspecting the keyframe percentage parameters are the culprit! The short answer is yes, adjusting your keyframe percentages (and ensuring your animation wraps cleanly) will absolutely fix that post-third-round blank gap.

Here's why the gap happens and how to fix it:

The Root Cause #

Most infinite carousel setups run into this issue for one of two reasons:

1. They leave a "dead zone" in the keyframes where no content is visible between the last slide and the first slide looping back.
2. They miscalculate the splits between slide visibility and transition times, leading to an awkward pause before the loop resets.

Step-by-Step Fix #

Let’s assume you have 3 testimonials, each with a 2-second visible pause and a 1-second transition between slides. That gives a total animation duration of 3*(2+1) = 9s (adjust timings to match your needs).

1. Align Keyframe Percentages to Total Duration

Your keyframes need to end exactly where they start, so the animation loops without a jump or gap. Here’s a CSS example using vertical sliding (swap translateY with translateX for horizontal carousels):

/* Container holding all testimonials */
.testimonial-carousel {
  height: 200px; /* Match height of your tallest testimonial */
  overflow: hidden;
}

/* Wrapper for all slides */
.slides-wrapper {
  animation: slide 9s infinite linear; /* Linear timing avoids weird pauses */
}

@keyframes slide {
  /* Slide 1 visible */
  0%, 22.22% { 
    transform: translateY(0); 
  }
  /* Transition to Slide 2 */
  22.22%, 33.33% { 
    transform: translateY(-100%); 
  }
  /* Slide 2 visible */
  33.33%, 55.55% { 
    transform: translateY(-100%); 
  }
  /* Transition to Slide 3 */
  55.55%, 66.66% { 
    transform: translateY(-200%); 
  }
  /* Slide 3 visible */
  66.66%, 88.88% { 
    transform: translateY(-200%); 
  }
  /* Transition BACK to Slide 1 (critical for no gap!) */
  88.88%, 100% { 
    transform: translateY(0); 
  }
}

2. Key Notes to Avoid Gaps

• Stick to linear timing: Easing functions like ease-in-out can create subtle pauses at transition start/end points, making gaps more noticeable.
• Normalize slide heights: If testimonials have varying heights, the container will resize between slides, creating a visual gap. Set a fixed height for the carousel container or use CSS to force all slides to the same height.
• Eliminate "dead" keyframe space: Every percentage of the animation should have a defined state (like transform or visibility). Don’t leave gaps between the end of one slide’s visibility and the start of the next transition.

If You’re Using JavaScript Instead of CSS #

If your carousel is JS-driven, the fix follows a similar logic:

• Clone the first testimonial slide and append it to the end of your slides list.
• When the carousel scrolls to the cloned slide, instantly reset the scroll position to the original first slide (this happens so fast users won’t notice the jump).

This eliminates the gap because the transition from the last real slide to the cloned first slide is smooth, then the reset is invisible.

内容的提问来源于stack exchange，提问作者Liz