17370845950

标签在HTML5中已被废弃，推荐用CSS animation+transform实现无缝滚动，兼顾可访问性、性能及交互控制，并适配prefers-reduced-motion与移动端优化。

marquee 标签在 HTML5 中确实被废弃了

是的， 标签在 HTML5 规范中**不被支持**，既不是有效元素，也不在任何现代标准中保留。浏览器虽大多仍能渲染（出于兼容性），但 W3C 明确将其列为“非标准、不推荐使用”。用它会导致 HTML 验证失败，且无法通过无障碍检测（如 screen reader 通常忽略或误读）。

CSS animation 实现滚动文字最稳妥

替代 的主流方案是用 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 上一卡一卡”，问题往往出在动画策略没和交互逻辑对齐。