改编Codepen CSS文本滑块至6轮播项后失效问题求助

嘿，我完全懂你碰到的麻烦——把3项轮播改成6项时，关键帧的时间百分比肯定是核心问题，这类轮播动画的时间分配完全和项数绑定，原3项的数值直接套用在6项上肯定会乱套。

先理清楚核心逻辑 #

首先得明确：6个轮播项的总动画周期是100%，每个项的完整生命周期（入场→展示→退场）要均匀分配，也就是每个项占总周期的1/6≈16.666%。

我们可以把每个项拆成三个固定阶段：

• 入场阶段：元素从左侧滑入，给它分配2%的总周期（你可以根据视觉需求调整为1%或3%）
• 展示阶段：元素保持在可视区域的时间，计算方式是16.666% - 入场时长 - 退场时长（比如入场+退场各2%，展示就是12.666%）
• 退场阶段：元素滑出到右侧，同样分配2%的总周期

正确的6项关键帧代码 #

按照这个逻辑，6个动画的关键帧应该是这样的（我统一用2%作为入场/退场时长，你可以按需微调）：

@keyframes anim-1 {
  0%, 2% { left: -100%; opacity: 0; }
  2%, 14.666% { left: 25%; opacity: 1; }
  14.666%, 16.666% { left: 110%; opacity: 0; }
  16.666%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
  0%, 16.666% { left: -100%; opacity: 0; }
  16.666%, 18.666% { left: 25%; opacity: 1; }
  18.666%, 31.332% { left: 25%; opacity: 1; }
  31.332%, 33.332% { left: 110%; opacity: 0; }
  33.332%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
  0%, 33.332% { left: -100%; opacity: 0; }
  33.332%, 35.332% { left: 25%; opacity: 1; }
  35.332%, 48% { left: 25%; opacity: 1; }
  48%, 50% { left: 110%; opacity: 0; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
  0%, 50% { left: -100%; opacity: 0; }
  50%, 52% { left: 25%; opacity: 1; }
  52%, 64.666% { left: 25%; opacity: 1; }
  64.666%, 66.666% { left: 110%; opacity: 0; }
  66.666%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-5 {
  0%, 66.666% { left: -100%; opacity: 0; }
  66.666%, 68.666% { left: 25%; opacity: 1; }
  68.666%, 81.332% { left: 25%; opacity: 1; }
  81.332%, 83.332% { left: 110%; opacity: 0; }
  83.332%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-6 {
  0%, 83.332% { left: -100%; opacity: 0; }
  83.332%, 85.332% { left: 25%; opacity: 1; }
  85.332%, 98% { left: 25%; opacity: 1; }
  98%, 100% { left: 110%; opacity: 0; }
}

额外注意事项 #

1. 动画时长与延迟：如果总动画时长设为6s，每个项的animation-delay应该依次是0s、1s、2s、3s、4s、5s（刚好对应1/6的周期）；如果总时长是12s，延迟就对应0s、2s...10s，以此类推。
2. 微调数值：如果入场/退场速度不合适，可以调整入场/退场的百分比（比如把2%改成3%，展示时间就变成16.666%-6%=10.666%），只要保证每个项的总周期是16.666%就行。
3. 定位值：你用的left:25%是原示例的布局定位，这个可以根据你的页面需求调整，不影响动画的时间逻辑。

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