marquee 标签因非标准、无无障碍支持、无法交互且被 w3c 废弃而禁用；推荐用 css @keyframes + transform: translatex() 实现可控滚动，注意 overflow: hidden、timing-function、iteration-count 及 js 交互优化。
marquee 标签为什么不能用了
<marquee></marquee> 是个早已被废弃的非标准标签，现代浏览器虽大多还能渲染，但不保证行为一致，且完全不支持 CSS 动画控制、无障碍访问（如屏幕阅读器会跳过或误读），更无法响应用户交互（比如 hover 暂停）。W3C 从 HTML5 开始就明确不收录它，所有新项目都该直接绕开。
CSS animation 实现滚动文字最稳方案
用 @keyframes + animation 是当前最通用、可控性最强的方式。核心思路是让文字容器在固定宽度内，通过 transform: translateX() 持续位移，再用 white-space: nowrap 防止换行。
常见错误现象：animation 卡顿、文字闪回、滚动不连贯
- 必须给父容器设
overflow: hidden，否则滚动内容会溢出显示 - 动画时长（
animation-duration）要和文字总宽度匹配，太短会飞快闪过去，太长则像静止；建议用calc(1s * var(--length))动态计算 - 用
animation-timing-function: linear，避免默认的ease导致加速减速破坏匀速感 - 若文字需无限循环，
animation-iteration-count: infinite不可少，且关键帧终点值必须等于起点（比如translateX(-100%)要对应容器宽度）
示例片段：
立即学习“前端免费学习笔记（深入）”；
.scroll-text {
white-space: nowrap;
overflow: hidden;
}
.scroll-text span {
display: inline-block;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}JavaScript 控制滚动暂停/速度/方向更灵活
纯 CSS 方案难实现 hover 暂停、点击反向、动态改速等交互，这时得靠 JS 操控 animation-play-state 或重写 transform。
使用场景：新闻跑马灯、股票行情、活动倒计时条
- 暂停用
element.style.animationPlayState = 'paused'，恢复用'running'，别直接删 class - 改速推荐用
element.style.animationDuration = '10s'，比重写 keyframes 更轻量 - 反向滚动只需翻转
transform的 X 值符号，或切换animation-direction: reverse - 注意：频繁操作
style可能触发重排，简单 hover 暂停用 CSS:hover就够了，JS 留给复杂逻辑
兼容性与性能要注意的几个点
移动端 Safari 对 transform: translateX() 的硬件加速支持较好，但老 Android WebView（4.4 以下）可能有闪烁；IE10+ 支持 @keyframes，但需加 -webkit- 前缀。
- 性能上，优先用
transform和opacity触发 GPU 加速，避免操作left、top或width - 文字内容动态更新时，别直接
innerHTML替换整个滚动区域，会导致动画重置；应只替换内部文本节点，并保持容器结构不变 - 如果滚动内容很长（比如上百个字），建议限制单次滚动长度，或分段渲染，防止长列表卡顿
真正麻烦的是文字宽度不确定时怎么算动画距离——这时候得用 getBoundingClientRect() 量一遍再设 transform，而不是硬写死百分比。
