transform: translateX() + 双倍内容拼接是最稳定无缝滚动解法；left/margin-left 因基准宽度与实际渲染宽度偏差、layout 触发掉帧致露白卡顿；双单元结构用 flex + translateX(-50%) 实现像素级对齐，vertical 滚动需确保 track 高度为 item 高度两倍且避免 margin-bottom。
用 transform: translateX() + 双倍内容拼接，是目前最稳定、无跳帧、不依赖 JS 定时器的 HTML 局部无缝滚动解法。靠 left 或 margin-left 动画基本都会在末尾露白或卡顿。
为什么 left / margin-left 会露白？
因为动画终点设为 left: -100% 时，位移基准是父容器宽度，而实际子内容（比如一串文字或图片）的渲染宽度往往 ≠ 容器宽度——尤其当内容含空格、内边距、字体度量差异时，-100% 就对不上起点，视觉上就断了。
- 浏览器计算
offsetWidth和真实渲染宽度常有小数像素偏差 -
position: relative下left是 layout 触发属性，动画易掉帧 - 无法保证动画结束帧与起始帧像素级对齐，人眼敏感间隙
transform + 双单元结构怎么搭？
核心是让动画只移动「一个单元的实际宽度」，再靠复制一份内容铺平衔接。不需要 JS 测量，纯 CSS 即可。
- 外层容器设
overflow: hidden，固定宽高 - 内层轨道（
.marquee-track）用display: flex或white-space: nowrap水平排列 - 把原始内容（
.marquee-item）复制一次，两个并排；总宽度 = 2 × 单元宽度 - @keyframes 中
transform: translateX(-50%)—— 移动半个轨道宽度，正好让第二个单元滑到视口起始位置
示例关键 CSS：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
.marquee {
overflow: hidden;
width: 300px;
}
.marquee-track {
display: flex;
animation: scroll 20s linear infinite;
}
.marquee-item {
flex-shrink: 0;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
vertical 无缝滚动要注意什么？
向上滚动同理，但容易忽略两点：一是 line-height 和 padding 会影响单行高度计算；二是 translateY(-50%) 的基准是整个 .marquee-track 高度，不是内容高度。
- 务必让
.marquee-track高度 = 单个.marquee-item高度 × 2（可用flex-direction: column控制） - 避免在
.marquee-item上设margin-bottom，改用padding-bottom或gap - 若内容动态加载，需确保 DOM 插入后重置动画：修改
animation名称或加keyframes强制重播
真正难的不是写出来，而是让不同字号、不同行高、带图标或 emoji 的文本，在各种缩放比例下都严丝合缝——这时候得靠 transform: translateX() 的亚像素渲染能力，而不是靠 JS 算像素再 setStyle。
