标签在html5中已被废弃，推荐用css animation+transform实现无缝滚动，兼顾可访问性、性能及交互控制，并适配prefers-reduced-motion与移动端优化。
marquee 标签在 HTML5 中确实被废弃了
是的，<marquee></marquee> 标签在 HTML5 规范中**不被支持**，既不是有效元素，也不在任何现代标准中保留。浏览器虽大多仍能渲染（出于兼容性），但 W3C 明确将其列为“非标准、不推荐使用”。用它会导致 HTML 验证失败，且无法通过无障碍检测（如 screen reader 通常忽略或误读）。
CSS animation 实现滚动文字最稳妥
替代 <marquee></marquee> 的主流方案是用 animation + transform，控制 translateX 或 translateY。关键点在于：动画需无缝循环、避免跳帧、适配不同长度文本。
- 用
@keyframes定义从100%到-100%的位移（不是0%→100%），否则会闪回 - 容器设
overflow: hidden，子元素设white-space: nowrap防止换行 - 动画时长根据内容长度动态调整更自然；固定时长下，文本越长，视觉速度越慢
- 加
will-change: transform可提升滚动流畅度（尤其低端设备）
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
.scrolling-text {
overflow: hidden;
white-space: nowrap;
}
.scrolling-text span {
display: inline-block;
animation: scroll-left 15s linear infinite;
will-change: transform;
}
JavaScript 滚动更适合动态/交互场景
当需要暂停/加速/反向/按按钮控制，或文本内容频繁更新时，CSS 方案受限（需重写 keyframes 或 JS 操作 style）。此时用 requestAnimationFrame 手动驱动位移更灵活。
- 避免用
setInterval，易因帧率波动导致卡顿 - 位移量应基于时间差（
deltaTime）计算，而非固定步长，保证跨设备速度一致 - 暂停时记得调用
cancelAnimationFrame，防止内存泄漏 - 若文本过短，需拼接两份内容（
textContent + textContent）才能实现无缝
别忽略可访问性和性能细节
滚动文字本质是运动干扰项，对部分用户（如眩晕症、注意力障碍）不友好。WCAG 要求提供暂停/停止机制。同时，持续动画会触发浏览器每帧重绘，若页面存在多个滚动区域，可能明显拖慢低端设备。
立即学习“前端免费学习笔记（深入）”；
- 务必加
prefers-reduced-motion媒体查询降级：@media (prefers-reduced-motion: reduce) { animation: none; } - 移动端慎用——iOS Safari 对
transform滚动优化较差，长文本易掉帧 - 如果只是“通知类”短文案（如“促销进行中”），用 CSS
transition+ hover 触发比自动滚动更克制
真正难的不是让字动起来，而是让它动得合理、可控、不伤人。很多项目卡在“怎么让停按钮生效”或者“为什么 iOS 上一卡一卡”，问题往往出在动画策略没和交互逻辑对齐。
