css 动画在循环时出现“跳帧”是因为单段动画结束与起始位置存在位移断点；通过双层元素错位同步动画，可实现视觉无缝的无限滚动效果。
css 动画在循环时出现“跳帧”是因为单段动画结束与起始位置存在位移断点；通过双层元素错位同步动画，可实现视觉无缝的无限滚动效果。
要实现真正平滑、无跳跃的无限横向滚动（如产品轮播、图标流、文字跑马灯），关键在于消除动画终点与起点之间的视觉间隙。你当前使用 translateX(-28%) 的单段位移方案，本质上是让内容移动一段固定距离后重置，浏览器无法自动衔接首尾——于是出现“瞬移式”跳回。
✅ 推荐方案：双层元素 + 反向/同步动画（无缝滚动核心技巧）
该方法不依赖 JavaScript，纯 CSS 实现，兼容性好（支持所有现代浏览器及 IE10+），原理简洁：
- 创建两个完全相同的滚动容器（#original 和 #copy）；
- 让它们宽度等于父容器宽度（或 fit-content 后设为 width: 100%），并绝对定位重叠；
- #original 从 left: 0% 动画至 left: -100%（向左滑出）；
- #copy 同步反向动画：从 left: 100% 动画至 left: 0%（向左滑入），且添加 reverse 或独立反向关键帧；
- 两者动画时长、缓动函数完全一致，形成“接棒式”连续流动。
以下是优化后的完整代码示例（已适配你的结构并增强健壮性）：
#workContainer {
position: relative;
width: 100vw;
height: 500px;
overflow: hidden;
margin: 0;
padding: 0;
}
/* 公共滚动容器样式 */
.workContainerScroll {
position: absolute;
top: 0;
left: 0;
height: 100%;
white-space: nowrap;
font-size: 0;
margin: 0;
padding: 0;
}
.workContainerScroll li {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
}
.workContainerScroll img {
width: 200px;
vertical-align: top;
}
/* 主滚动层：从右到左移动 */
#original {
animation: scrollPrimary 12s linear infinite;
}
/* 副滚动层：初始偏移 + 同步反向移动，实现无缝衔接 */
#copy {
animation: scrollSecondary 12s linear infinite;
}
@keyframes scrollPrimary {
from { left: 0%; }
to { left: -100%; }
}
@keyframes scrollSecondary {
from { left: 100%; }
to { left: 0%; }
}<div id="workContainer">
<!-- 原始内容 -->
<ul id="original" class="workContainerScroll">
<li><img src="assets/images/showcase/iPhoneShowcase1.png" alt="Item 1"></li>
<li><img src="assets/images/showcase/iPhoneShowcase2.png" alt="Item 2"></li>
<!-- ... 其余 11 项 -->
</ul>
<!-- 完全相同的副本（顺序一致，非镜像） -->
<ul id="copy" class="workContainerScroll">
<li><img src="assets/images/showcase/iPhoneShowcase1.png" alt="Item 1 (copy)"></li>
<li><img src="assets/images/showcase/iPhoneShowcase2.png" alt="Item 2 (copy)"></li>
<!-- ... 完全复制原始列表 -->
</ul>
</div>⚠️ 注意事项与最佳实践
- 必须复制全部子元素：副本 <ul> 内容需与原 <ul> 完全一致（包括顺序、尺寸、间距），否则衔接处会出现空白或重叠；
- 避免 flex + justify-content: space-between：该布局会动态计算间距，导致副本宽度不可预测；改用 inline-block + 显式 margin 或 gap 更可控；
- 动画时长建议 ≥10s：过短易察觉循环节奏，可根据内容密度微调；
- 性能优化：添加 will-change: transform; 或 transform: translateZ(0) 到 .workContainerScroll 可启用 GPU 加速；
- 响应式适配：若需适配不同屏幕，可用 vw 单位控制图片宽度，并用 calc() 动态计算 translateX 距离（但双层方案下更推荐保持 left 百分比方案，天然响应）。
✅ 为什么这比 translateX 单段动画更可靠？
单段 transform: translateX() 方案需精确计算总位移（如 -28%），而该值极易因内容增减、字体渲染差异、盒模型变化而失效；双层方案仅依赖 0% ↔ 100% 的相对定位，逻辑解耦、容错性强、维护成本低，是生产环境推荐的标准解法。
立即学习“前端免费学习笔记（深入）”；
只要两个滚动层严格同步，人眼就无法识别切换点——真正的「无限滚动」，就此达成。
