真正无缝横向滚动必须用transform:translatex(-100%)+双份内容+精确宽度计算，因left/margin动画基准错、强制重排且不兼容；而transform基于自身宽、gpu加速、语义清晰且自动适配。
直接用 transform: translateX() + 双份内容 + 精确宽度计算，就能实现真正无缝的横向滚动，不需要 JS，也不依赖 left 或 margin 动画。
为什么不能用 left 或 margin-left 动画
用 left: -100% 时，百分比基准是父容器宽度，不是内容总宽，导致位移距离严重不足；动画结束时内容没走完，视觉上会“跳回”起点，出现明显卡顿或闪动。而 transform: translateX(-100%) 的 100% 是当前元素自身宽度，天然匹配滚动距离。
- 常见错误现象：
left动画循环时有“抽搐感”，尤其在 Safari 或低性能设备上更明显 - 兼容性影响：IE10+ 支持
transform，但left动画在 flex 容器中行为不稳定 - 性能差异：
transform触发 GPU 加速，left强制重排重绘，滚动帧率易掉
@keyframes 动画必须从 0% 到 100% 移动完整自身宽度
关键不是“移动多少像素”，而是“移动多少百分比”——这个百分比必须对应 .marquee-inner 元素的完整宽度，才能让第二组内容恰好接上第一组末尾。
- 推荐写法：
transform: translateX(-100%)，语义清晰且自动适配宽度变化 - 不推荐硬编码像素值（如
-3060px），一旦内容增减或响应式缩放，就得手动改 - 动画时间用
animation-duration控制，比如8s表示滚完一整轮耗时 8 秒 - 必须加
infinite，否则只滚动一次就停住
双份内容拼接是无缝的物理前提
单组内容滚动到末尾时，视口必然暴露空白。只有提供两组完全相同的内容，当第一组完全移出时，第二组刚好完全进入，视觉才连续。
- HTML 结构要复制全部子项，不是只复制第一个：
<div class="marquee-inner"> <item>...</item><item>...</item>...<!-- 再来一遍 --> </div> - CSS 中
.marquee-inner的width必须等于单组总宽 × 2，例如 5 个580px项 + 4 个40px间隙 → 单组宽3060px→ 总宽设为calc(3060px * 2)或6120px - 不要用
flex-wrap: wrap或inline-block拼接，它们会引入不可控的空格/换行间隙
容器必须隐藏溢出且禁用滚动条
overflow: hidden 是视觉裁切的基础，但容易被忽略的是默认滚动条占位和内部 white-space 行为。
- 父容器必须设
overflow: hidden，且不能有padding干扰可视区域尺寸 - 如果滚动内容是文字，需加
white-space: nowrap防止换行打断连续性 - 避免给滚动内容设
display: inline-block后又忘记清除换行符产生的空隙（可用font-size: 0或注释掉 HTML 换行） - 移动端要注意
-webkit-overflow-scrolling: touch可能干扰动画流畅度，建议禁用
最易被忽略的点是：双份内容必须结构完全一致，包括所有内联样式、伪元素、甚至空格字符；任意一处 DOM 差异都会导致两组内容宽度不等，从而在衔接点产生错位或跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
