无缝滚动需复制图片并用transform: translateX()平滑位移，禁用steps()、启用GPU加速，配合white-space: nowrap消除间隙，JS控制暂停更可靠，响应式下应动态计算位移而非硬编码。
用 @keyframes + transform: translateX() 实现无缝滚动
核心是让图片容器在动画结束时，视觉位置回到起点，但不靠“跳回”——而是靠复制首尾图片、平滑位移实现真正无缝。直接对单组图片做 100% { translateX(-100%) } 会闪一下，因为浏览器渲染有微小延迟或重绘边界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把图片列表复制一份拼在末尾（比如原图 3 张，DOM 里放 6 张），容器宽度设为原图总宽的 200%
- 动画全程移动
100%容器宽度（即一张图宽度 × 图数量），这样终点刚好对齐复制段起点 - 动画时长用
animation-duration控制，别用steps()，它会卡顿 - 必须加
will-change: transform或transform: translateZ(0)触发 GPU 加速，否则滚动发虚或掉帧
overflow: hidden 和 white-space: nowrap 的配合陷阱
图片横向滚动，常见错误是只设了 overflow: hidden 却忘了让子元素不换行。默认 img 是 inline 元素，受空格/换行符影响，会在 DOM 中产生间隙，导致容器实际宽度比计算值大，动画偏移量错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
white-space: nowrap，所有img设vertical-align: top或display: block - 图片外层再包一层
div并设font-size: 0，彻底消除 inline 元素间隙 - 不要依赖
margin: -4px这类 hack，不同字体渲染下间隙值不稳定 - 用
flex布局替代 inline 也能解决，但需注意flex-wrap: nowrap和flex-shrink: 0配合
如何让轮播暂停在鼠标悬停时，且不破坏循环节奏
直接写 :hover { animation-play-state: paused } 看似简单，但动画暂停后恢复时，时间点可能错乱：比如停在 73%，继续时从 73% 开始跑，导致位移断层或“抽搐”。真正要的是暂停时保持当前位移状态，恢复时无缝接续。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用纯 CSS 暂停，改用 JS 监听
mouseenter/mouseleave，动态修改animation-play-state并记录暂停时刻的getComputedStyle中transform值 - 更稳妥做法：用 JS 控制
requestAnimationFrame+translateX，把动画逻辑收归 JS，暂停/恢复完全可控 - 如果坚持纯 CSS，至少加
animation-fill-mode: forwards，确保暂停后样式不回退 - 注意 Safari 对
animation-play-state的兼容性，iOS 15.4 之前有 bug，需加-webkit-animation-play-state
响应式下图片宽度变化导致位移计算失效
用固定像素写 @keyframes 位移（比如 translateX(-300px)）在缩放或屏幕变宽时立刻失效。百分比位移（如 translateX(-100%)）看似聪明，但它是相对于容器当前宽度，而容器宽度又随图片数量动态变化，结果就是每张图滚动距离不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃在 CSS 里硬编码位移值，改用 JS 动态计算单张图宽度，再设置
style.animationDuration和style.transform - 若必须纯 CSS，用
calc()结合vw或flex-basis，例如：width: calc(100vw / 3)（假设每屏显示 3 张） - 给图片设
flex: 0 0 auto+width: 100%，让其撑满父容器再用translateX(-100%)，此时百分比才可靠 - 避免用
max-width或object-fit干扰图片原始尺寸参与布局计算
滚动动画最难的不是动起来，而是动得稳、停得准、缩放时不崩。多数问题出在把位移当“绝对值”处理，其实它永远是相对当前布局上下文的——这点一旦忽略，调三天也看不出哪错了。
