文字闪跳或断层的根本原因是动画起点与终点位置不连续，如位移距离不等于文字视觉宽度、未预留重复内容或容器宽度不足；解决需确保位移精确匹配文字总宽、首尾帧重合，并用双份文本+translateX实现无缝滚动。
用 @keyframes 定义位移动画时，为什么文字会闪跳或断层？
根本原因是动画起点和终点位置不连续——比如从 transform: translateX(0) 动到 translateX(-100%)，但容器宽度不等于文字总宽，或没预留重复内容。浏览器渲染时无法无缝衔接，就会出现回跳或空白间隙。
解决思路是：让动画位移距离恰好等于「一整段文字的视觉宽度」，且动画结束帧必须与起始帧完全重合。实际操作中更可靠的做法是复制一遍文字内容，用两段并排实现视觉无缝。
- 确保父容器设
overflow: hidden，否则滚动区域会撑开 - 子元素（文字容器）宽度至少为
200%，里面放两遍相同文字 - 动画用
translateX，不要用left或margin-left，避免触发重排 - 动画时长按文字长度动态调整，固定时长会导致短文本飞快、长文本拖沓
如何用纯 CSS 实现响应式跑马灯，不依赖 JS 计算宽度？
关键在用 inline-block + white-space: nowrap 让文字自然撑宽，再用 width: max-content 获取真实宽度。但 CSS 本身不能读取 DOM 宽度，所以得换策略：用伪元素复制内容，配合 display: inline 和 animation 自动对齐。
最简可行方案是写死两段内容，用 Flex 布局拉平：
立即学习“前端免费学习笔记（深入）”；
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
animation: scroll 20s linear infinite;
}
.marquee span::after {
content: attr(data-text) " " attr(data-text);
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
注意：data-text 要在 HTML 里手动填入文字，否则伪元素为空；100% 是相对于父容器宽度，不是文字自身，所以需确保父容器有明确宽度（如 width: 100% 或 max-width）。
移动端 Safari 上动画卡顿或直接不播，怎么修？
Safari 对 transform 的硬件加速支持较敏感，尤其在 translateX 使用百分比单位时，容易因小数像素渲染失败导致掉帧或停播。
- 强制开启 GPU 加速：给动画元素加
transform: translateZ(0)或will-change: transform - 避免用
%做位移值，改用vw或固定px（比如translateX(100vw)），但需同步调整动画终点 - 动画时长不能低于 8s，Safari 对过快的无限动画有降频策略
- 禁用
prefers-reduced-motion用户设置干扰：加媒体查询@media (prefers-reduced-motion: reduce) { animation-play-state: paused; }
要不要用 scroll-behavior: smooth 或 scrollTo() 替代 CSS 动画？
不要。这两个是用于「用户主动滚动」的 API，不是做自动循环播报的工具。scroll-behavior 只影响 scrollIntoView 或锚点跳转的过渡效果；scrollTo() 需 JS 定时调用，且无法保证帧率稳定，还可能被浏览器节流。
真正需要 JS 的场景只有一种：当文字内容动态变化、长度不可预知，且要求精确控制滚动速度（如每秒多少像素）。此时才用 requestAnimationFrame + scrollLeft 手动驱动，但复杂度陡增，90% 的播报需求用纯 CSS 就够了。
最容易被忽略的是字体加载时机：如果用自定义字体，@font-face 加载完成前，文字宽度计算错误，会导致动画错位。务必加 font-display: swap，或等 document.fonts.ready 后再启用动画类。
