纯 CSS 可实现文字左右平滑滚动，核心是用 @keyframes 配合 transform: translateX() 和 infinite 循环；避免用 margin-left 或 left 触发重排，需设 white-space: nowrap、display: inline-block，动画时长 ≥10s 且用 ease-in-out 更自然。
用 CSS animation 实现文字左右平滑滚动
纯 CSS 就能搞定，不需要 JS。核心是用 @keyframes 定义从左到右再回左的位移，配合 transform: translateX() 和 infinite 循环。
常见错误是直接用 margin-left 或 left 动画——会触发重排，卡顿明显；translateX 走 GPU，更流畅。
- 容器需设
white-space: nowrap防止文字换行 - 滚动元素要设
display: inline-block或display: inline，否则width不生效 - 动画时长建议 ≥ 10s，太快易眩晕；
ease-in-out比linear更自然 - 示例：
@keyframes scrollLeftRight { 0% { transform: translateX(-100%); } 50% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } .scrolling-text { animation: scrollLeftRight 12s ease-in-out infinite; white-space: nowrap; display: inline-block; }
marquee 标签还能用吗？
能，但不推荐。它已被 HTML5 废弃，Chrome/Firefox 虽暂未移除，但行为不一致（比如 Safari 已基本不支持），且无法精确控制速度、暂停、方向切换等。
典型问题：<marquee behavior="alternate"> 在部分安卓 WebView 中失效；scrollamount 值在不同设备上实际像素偏移差异大。
立即学习“前端免费学习笔记（深入）”；
- 仅适合内网老系统兼容性兜底，新项目别碰
- 若真要用，必须加
direction="left"+behavior="alternate"才左右来回 - 无法响应鼠标悬停暂停（除非 JS 注入事件，反而更麻烦）
需要鼠标悬停暂停？用 :hover 控制动画状态
CSS 方案完全可以支持交互，关键在 animation-play-state。
- 默认设
animation-play-state: running - 加
.scrolling-text:hover { animation-play-state: paused; } - 注意：不要只写
:hover，得带上具体选择器，否则可能被父级 hover 干扰 - 如果滚动内容含链接，记得给
a元素也加pointer-events: auto，否则 hover 失效
长文本滚动不连贯？补全首尾内容实现无缝
单纯左右动一次，末尾回到起点会有“跳变”。解决办法是复制一份文字拼在后面，让动画结束点刚好对齐起点视觉位置。
原理：动画从 -100% 到 +100vw，但内容宽度 > 容器宽时，需确保动画终点对应完整文本长度 + 间隙。
- 最简做法：HTML 里写两遍文字，如
<span>欢迎光临欢迎光临</span> - 更灵活：用伪元素
::after复制内容，避免 DOM 冗余 - 若用 JS 动态生成，注意更新后要重置动画：
el.style.animation = "none"; el.offsetHeight; el.style.animation = "";
滚动效果是否自然，关键不在代码多寡，而在位移起止点是否匹配内容实际宽度和容器视口。这点容易被忽略，调不好就总觉得“卡一下”。
