本文详解如何通过纯 CSS 构建真正平滑的无限滚动轮播组件，解决 translateX(-100%) 动画循环时的视觉跳帧问题，关键在于精确计算内容宽度、改用 transform 替代 left，并采用双份内容拼接实现无缝衔接。

本文详解如何通过纯 css 构建真正平滑的无限滚动轮播组件，解决 `translatex(-100%)` 动画循环时的视觉跳帧问题，关键在于精确计算内容宽度、改用 `transform` 替代 `left`，并采用双份内容拼接实现无缝衔接。

要实现无感知的无限滚动轮播（marquee），核心挑战在于：当动画从末尾跳回起点时，用户会察觉明显的“卡顿”或“重置闪烁”。原始代码中使用 left: -100% 配合百分比宽度，导致动画基准错误（-100% 是相对于父容器而非内容本身），且单次动画终点与起点完全重合，造成帧间停顿。

✅ 正确解法：三要素缺一不可

1. 精准内容宽度计算
   不再依赖模糊的 width: 200%，而是显式计算总宽度：
   每个 .marquee-item 宽 580px，gap: 40px 在 span 内生效，5 个元素间共 4 处间隙 → 总宽 = (580px + 40px) × 5 + 40px = 3140px。
   对应 CSS：

   .marquee-inner {
     width: calc((580px + 40px) * var(--total-marquee-items) + 40px);
   }

2. 用 transform: translateX() 替代 left
transform 的百分比基于元素自身尺寸，-100% 即精确移动整个内容宽度，且 GPU 加速更流畅：

   

   Wjs Uploading Video

   将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

   下载

   @keyframes marqueeLeft {
     0% { transform: translateX(0); }
     100% { transform: translateX(-100%); } /* 移动自身完整宽度 */
   }

3. 双份内容拼接（关键！）
   HTML 中每个方向的 .marquee-inner 均包含两组相同序列（如 1→5 重复两次）。当第一组滑出视口时，第二组恰好无缝接续——视觉上形成无限循环。这是纯 CSS 实现“无缝”的唯一可靠方式。

? 完整优化后 CSS（精简关键部分）

.marquee-inner {
  display: flex;
  /* 精确宽度：单item宽 + gap × (items-1) + 首尾额外gap */
  width: calc((580px + 40px) * var(--total-marquee-items) + 40px);
  position: absolute;
  /* 使用 transform 而非 left */
}

@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes marqueeRight {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

⚠️ 注意事项

• 禁止响应式宽度干扰：题目要求 .marquee-item 固定 580px，因此所有计算（包括 gap 和 width）必须使用绝对单位（px），避免媒体查询或 rem/em 导致计算偏差。
• overflow: hidden 必须作用于直接父容器（.marquee-block），确保子元素移出区域被裁剪。
• 动画时长需匹配内容长度：若增加更多 .marquee-item，需同步调整 width 计算和 animation-duration，维持匀速滚动体验。
• 兼容性提示：gap 在 Flex 布局中 IE 不支持，如需兼容旧版，可用 margin-right 替代 gap 并手动处理最后一项间距。

通过以上改造，轮播将实现真正的视觉无缝循环——无 JS、无跳帧、无响应式干扰，仅靠 CSS 的数学精度与 transform 的渲染优化达成专业级效果。