HTML5已废弃标签，应使用CSS @keyframes+animation替代，确保兼容性、性能与可控性；必要时辅以requestAnimationFrame实现JS滚动，兼顾移动端适配与可访问性。
HTML5 里没有
HTML5 正式废弃了 ，哪怕浏览器还能渲染，也属于非标准、不可靠行为。Chrome、Firefox 在某些版本中已限制其自动播放或忽略部分属性（比如 direction="up" 失效）。用它上线，等于埋个兼容性雷。
CSS @keyframes + animation 是最稳妥的替代方案
用纯 CSS 实现滚动，语义清晰、性能好、支持暂停/反向/变速，还能响应式适配。关键不是“怎么动”，而是“怎么控制动得自然”：
-
white-space: nowrap防止文字换行打断滚动流 - 动画时长（
animation-duration）要和内容长度匹配：内容越长，时间越长，否则会卡顿或闪回 - 用
infinite+linear保证匀速无缝循环；避免ease导致首尾速度不一致而露白 - 若需鼠标悬停暂停，加
:hover { animation-play-state: paused; }
示例（水平左滚）：
这是一段滚动的文字，支持任意长度
JavaScript 控制滚动更灵活，但别一上来就写轮子
真需要动态增删文字、点击跳转、或与后端数据联动时，才考虑 JS。直接操作 scrollLeft 或 transform 比定时器 setInterval + innerHTML 拼接更稳定：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame替代setInterval，避免丢帧 - 滚动容器必须设
overflow: hidden，子元素宽度要显式计算（offsetWidth或getBoundingClientRect()） - 注意重排（reflow）：频繁读写
scrollLeft可能触发强制同步布局，优先用transform动画
简单手动滚动示意（仅核心逻辑）：
const marquee = document.querySelector('.js-marquee');
let pos = marquee.scrollWidth;
function animate() {
marquee.scrollLeft = pos;
pos -= 0.5;
if (pos < -marquee.scrollWidth / 2) pos = marquee.scrollWidth;
requestAnimationFrame(animate);
}
animate();
移动端和可访问性容易被忽略的点
跑马灯在手机上常因缩放、横竖屏切换错位；对屏幕阅读器用户，默认是干扰项：
- 加
aria-hidden="true"明确告诉辅助技术“这是装饰性动效，不用读” - 用
@media (prefers-reduced-motion: reduce)关闭动画，尊重系统级动效偏好 - 避免在小屏上用过快滚动——手指滑动时视觉冲突明显，建议检测
window.innerWidth后降速或停用
真正难的不是让字动起来，是让它动得恰到好处：不抢眼、不干扰、不卡顿、不伤眼。滚动速度、停显时机、中断恢复逻辑，这些细节才是上线前必须实测的。
