CSS @keyframes + transform: translateX() 是广告跑马灯唯一靠谱方案，因其走 GPU 加速、首屏即动、不触发重排，配合 overflow: hidden 和 white-space: nowrap 可确保稳定滚动；需双文案拼接防断层，支持 hover 与 touch/click 暂停，且动画名须唯一避免覆盖。
标签不能用，现代浏览器已停用其滚动行为，广告位上硬塞它会导致 Chrome/Firefox 中静止不动、Safari 里直接不渲染，还可能触发控制台警告。
为什么 CSS @keyframes + transform: translateX() 是广告跑马灯唯一靠谱方案
广告场景对稳定性、加载后立即生效、不卡顿有强要求。CSS 动画走 GPU 加速，首屏渲染即动，且能和广告容器宽度联动——比如 banner 宽 1200px，文字内容变长时只需微调 animation-duration，不用重写逻辑。
- 必须设
overflow: hidden在广告父容器上，否则滚动文字会撑开布局，破坏响应式排版 -
white-space: nowrap忘加会导致中文/图标换行，尤其在小屏广告位上直接变成两行堆叠 - 动画起始位置用
transform: translateX(100%)，不是0，否则第一帧会闪现“文字从左滑入”的跳变 - 避免用
padding-left: 100%做偏移——它依赖字体渲染宽度，在不同设备上误差大；translateX()是像素级精确位移
广告文案动态拼接时怎么避免滚动断层
电商 banner 常把促销文案（如“满299减50｜新品首发｜限时48小时”）拼成一串滚动。纯 CSS 方案无法自动适配新文本宽度，容易出现“滚动到末尾突然回跳”或“中间留白”。这时要手动补内容：
- 把原始文案复制一次：
"满299减50｜新品首发｜限时48小时｜满299减50｜新品首发｜限时48小时" - 不靠 JS 计算宽度，而是用固定比例：文字总宽 ≈ 容器宽 × 2.2，这样动画周期内刚好滚动完两个完整副本
- 如果文案来自 CMS 或接口，必须在服务端拼接好再吐给前端，避免 JS 拼接后触发重排重绘
鼠标悬停暂停必须兼容移动端点击
PC 端可用 :hover，但广告位在手机上没 hover；用户点一下就暂停、再点恢复是刚需。不能只写 .ad-marquee:hover span { animation-play-state: paused; }。
- 给滚动容器加
tabindex="0"，让它可聚焦，支持键盘导航与屏幕阅读器 - 用 JS 绑定
click和touchstart双事件，切换is-pausedclass - 暂停时别直接删
animation，而是设animation-play-state: paused，恢复时立刻续上原速度，不丢帧 - 注意：多个广告位共用同一套 class 名时，
@keyframes名称必须唯一，否则 Chrome 会随机覆盖动画
真正难的不是让字动起来，而是当广告尺寸随 viewport 缩放、深色模式切换、或文案含 Emoji 时，translateX() 的百分比基准和动画时长得同步调整——这些没法靠一套 CSS 通吃，得在媒体查询或 JS 中做条件分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
