标签在 HTML5 中已被废弃，存在兼容性差、行为不可控、移动端失效等问题；推荐用 CSS @keyframes 动画或 JavaScript（requestAnimationFrame）实现稳定滚动，关键注意初始偏移、无缝循环和响应式适配。
标签在 HTML5 中已被废弃，浏览器虽可能仍渲染，但不保证滚动行为一致，更不会通过 W3C 验证。直接用它实现“滚动文字”，本质是走技术捷径，埋下兼容性隐患。
为什么
Chrome、Firefox、Edge 等已逐步弱化对 的支持；部分版本会忽略 behavior、direction 等属性，或仅响应极简写法（如 ），但行为不可控。
-
scrollamount和scrolldelay在 Safari 中完全无效 - 嵌套在 或 Flex/Grid 容器中时，
常被强制拉伸/截断，失去滚动能力- 使用
onmouseover="this.stop()"类交互逻辑，在移动端无 hover 事件，失效CSS
@keyframes+animation是可靠替代方案用纯 CSS 实现水平滚动文字，控制力强、兼容性好（IE10+）、可响应式适配。
.marquee { white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee span { display: inline-block; padding-left: 100%; animation: scroll-left 20s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }- 动画时长
20s需根据文字长度动态调整：内容越长，值应越大，否则出现跳帧或卡顿 -
padding-left: 100%是关键——确保初始状态文字完全在容器右侧外，避免闪现 - 若需无缝循环，文字内容必须重复至少两次（如
Hello World Hello World）
JavaScript 方案适合需要暂停/控制/动态更新的场景
当滚动要响应用户操作（如鼠标悬停暂停、点击重播）或文字内容由接口返回时，CSS 动画不够灵活，应改用 JS 控制
transform位移。立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame替代setInterval，避免丢帧 - 监听
mouseenter/mouseleave切换isPaused状态，再控制动画推进逻辑 - 避免直接操作
element.style.left——触发重排，改用transform: translateX() - 动态插入文字后，需重置动画起始位置，否则新内容从中间切入
真正麻烦的不是“怎么让它动起来”，而是“动得稳、停得准、换得顺”。多数人卡在 CSS 动画的初始偏移和循环缝合上，JS 方案则容易陷入手动管理帧节奏的泥潭——这两处细节，比选哪种方案更重要。
- 使用
