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