本文详解如何解决 CSS animation 在循环播放时出现的“跳帧”问题，通过双层元素错位动画技术实现真正平滑、无缝的无限滚动效果。
本文详解如何解决 css `animation` 在循环播放时出现的“跳帧”问题，通过双层元素错位动画技术实现真正平滑、无缝的无限滚动效果。
在使用 CSS @keyframes 创建水平滚动动画（如图片轮播、文字跑马灯）时，一个常见痛点是：当动画执行到末尾并跳回起点时，视觉上会出现明显的“卡顿”或“跳跃”，破坏了流畅感。根本原因在于单次动画（from → to）结束瞬间，transform: translateX() 或 left 值被强制重置为初始值，浏览器无法自动衔接首尾——这并非性能问题，而是动画逻辑本身的不连续性。
要实现视觉无缝的无限滚动，核心思路是：避免重置，改为“接力”。即用两个完全相同的元素（如两组 <ul>），以相同速度、相反方向（或错开相位）持续运动，使其中一个移出视口时，另一个恰好补全画面，形成视觉上的无限延伸。
✅ 推荐方案：双容器错位平移法（兼容性强、语义清晰）
以下为优化后的生产级实现（已适配现代 Flex 布局与 transform 性能最佳实践）：
#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;
display: flex;
gap: 15px; /* 替代 float + margin，更可控 */
}
/* 主滚动层：从左向右平移（视觉上向左滚动） */
#original {
animation: scrollPrimary 12s linear infinite;
}
/* 备用滚动层：起始位置偏移 100%，实现无缝衔接 */
#copy {
animation: scrollPrimary 12s linear infinite;
transform: translateX(100%);
}
@keyframes scrollPrimary {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* 图片项统一处理 */
.workContainerScroll li {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.workContainerScroll img {
width: 200px;
height: auto;
vertical-align: top;
}<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>
<!-- 完全相同的副本（DOM 复制即可） -->
<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>⚠️ 关键注意事项
- 动画时长需一致：#original 与 #copy 的 animation-duration 必须严格相同，否则会产生错帧。
- 起始偏移量 = 100%：#copy 的 transform: translateX(100%) 确保其首项与 #original 末项对齐，构成视觉闭环。
- 避免 float 与 inline-block 混用：原代码中 float: left 与 display: inline-block 并存易引发布局塌陷和间隙问题；统一采用 flex + gap 更健壮。
-
性能优化建议：
- 使用 transform（而非 left/top）触发 GPU 加速；
- 添加 will-change: transform 到 .workContainerScroll（仅在必要时）；
- 图片建议预加载或使用 loading="lazy" 平衡性能与体验。
? 进阶提示：动态内容适配
若列表项由 JavaScript 动态生成，可复用同一数据源渲染两份 DOM：
立即学习“前端免费学习笔记（深入）”；
const items = [...document.querySelectorAll('#original li')];
const copyList = document.getElementById('copy');
items.forEach(li => copyList.appendChild(li.cloneNode(true)));此方案无需依赖第三方库，纯 CSS 驱动，兼容 Chrome/Firefox/Safari/Edge（≥v100），是目前实现无缝无限滚动最稳定、最易维护的模式。只要确保双容器结构、相同时长、精准偏移，即可彻底告别“跳跃”，获得影院级丝滑滚动体验。
