标签虽已废弃但浏览器仍支持，适合教学演示；现代标准方案是CSS @keyframes配合transform: translateX()实现平滑滚动；推荐CodePen进行实时调试；卡顿问题多源于渲染层设置不当，应避免will-change、opacity等干扰属性。
用
HTML5 已经废弃 ，但它在 Chrome、Edge、Firefox 的最新版中仍能运行（只是控制台会报 marquee is deprecated 警告）。适合快速验证滚动逻辑或教学演示，比如：
scrollamount 值太小（如 1）会卡顿，太大（如 20）会闪；direction 可选 left、right、up、down；behavior 设为 alternate 可来回滚动。
CSS @keyframes + animation 是现代标准做法
真正兼容 HTML5 且可控制的方案是纯 CSS 动画。核心是用 transform: translateX() 配合 infinite 循环：
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee {
white-space: nowrap;
animation: scroll-left 10s linear infinite;
}关键点：white-space: nowrap 防止文字换行；动画时长（如 10s）越短滚动越快；若内容过长，需确保容器设了 overflow: hidden；用 translateX 比 left 性能更好，尤其在移动端。
在线编辑器选 CodePen 还是 JSFiddle？推荐 CodePen
CodePen 对实时预览更友好：
- 默认三栏布局（HTML/CSS/JS + 实时渲染区），改完自动刷新，不用手动点“Run”
- 支持直接嵌入
或 CSS 动画，无跨域或 CSP 限制 - 点击“Change View” → “Full Page” 可查看无边框全屏效果，方便观察滚动边界
- JSFiddle 在修改 CSS 后常需手动点“Run”，且预览 iframe 有时会缓存旧样式
onload 自动执行，比 JSFiddle 的 onLoad 模式更稳定。
滚动文字卡顿或跳帧？先关掉 will-change 和检查字体加载
常见卡顿不是代码写错，而是渲染层问题：
- 不要提前加
will-change: transform—— 现代浏览器已自动优化，强行加反而触发多余图层合成 - 用系统字体（如
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI"），避免 Web Font 加载完成前空白或重排 - 滚动区域父容器避免设
opacity、filter或transform，这些会创建新层叠上下文，干扰动画合成 - 用 Chrome DevTools 的
Rendering面板勾选 “FPS meter”，看是否稳定在 60fps；若掉帧，优先查是否有box-shadow或渐变背景跟着一起动
requestAnimationFrame + transform 手写滚动，但对简单跑马灯来说，CSS 方案已足够。立即学习“前端免费学习笔记（深入）”；
