CSS动画替代是正解，因其在Chrome90+部分失效、Firefox/Safari不兼容，且无障碍/响应式/深色模式全面缺失；须用overflow:hidden、white-space:nowrap、display:inline-block三样式配合@keyframes实现稳定滚动。
<marquee></marquee> 标签不能用，改用 CSS 动画才是正解。它在 Chrome 90+ 已部分失效（比如 direction="up" 不工作），Firefox 和 Safari 从未完整支持，且无障碍、可访问性、响应式、深色模式全部掉链子。
为什么直接改 <marquee></marquee> 属性行不通
你改 scrollamount、scrolldelay 或 behavior，浏览器可能根本无视——不是 bug，是标准移除后的“故意不兼容”。控制台常报 Unknown attribute 警告；iOS Safari 直接静默忽略；屏幕阅读器跳过整个区域；缩放字体时文字会换行溢出。这些不是配置问题，是底层行为已被废弃。
CSS @keyframes 滚动字幕必须设的三个样式
缺一不可，否则滚动错位、闪跳、撑开布局：
-
overflow: hidden必须加在父容器上，否则动画过程内容会溢出显示 -
white-space: nowrap必须加在滚动文本元素上，否则中文/空格处自动换行 -
display: inline-block（或flex）必须设在动画元素上，否则transform: translateX()对inline元素无效
文字长度变、容器宽度响应式时怎么不卡顿
硬写 animation-duration: 20s 是最大陷阱。真实项目里，用户缩放页面、横竖屏切换、动态加载新文案，都会让原本“刚好跑完一圈”的时间立刻失准——出现明显停顿或加速撕裂。
解决思路不是 JS 算宽，而是用 CSS 做两件事：
- 把原文本复制拼接一次：
"公告：系统升级中 | 维护时间：23:00–02:00 | "→"公告：系统升级中 | 维护时间：23:00–02:00 | 公告：系统升级中 | 维护时间：23:00–02:00 | " - 动画始终用
100%位移：0% { transform: translateX(100%); } 100% { transform: translateX(-100%); }，不依赖像素值
这样无论容器多宽、字体多大，动画节奏都稳定，首尾衔接无间隙。
鼠标悬停暂停和移动端点击暂停怎么写才可靠
纯 CSS 的 :hover 只对桌面有效，且必须作用在带动画的元素本身：
.marquee span:hover {
animation-play-state: paused;
}
写成 .marquee:hover span 是错的——父容器没动画，悬停不会触发重绘；写成 .marquee:hover 更没用。
移动端要点击暂停，得用 JS 切换 class：
- 绑定
click（不是tap，避免 polyfill 依赖） - 执行
element.classList.toggle('is-paused') - CSS 里写
.marquee span.is-paused { animation-play-state: paused; }
别忘了加 touch-action: manipulation 防止 iOS 300ms 延迟。
真正难的从来不是让字动起来，而是动得稳、停得准、读得清——当文案从后端 API 动态注入、容器宽度随 flex 自适应、又得同时兼容深色模式和屏幕阅读器时，所有“写死”的数值和选择器都会立刻暴露脆弱性。
