真正可靠的做法是用@keyframes控制位移方向，反向滚动即从右往左动，通过调整0%和100%的translateX符号实现，如scrollRight动画中0%为translateX(-100%)、100%为translateX(100%)。
用 direction 属性无法实现文字反向滚动
很多人以为给 加 direction="right" 就是“反向”，但这是误解—— 已被 HTML5 废弃，且 direction 仅控制初始滚动方向（left/right/up/down），不是 CSS 的文本书写方向。真要用原生语义化方案，得换思路。
CSS animation + transform: scaleX(-1) 确实能镜像翻转，但不推荐
对容器设 transform: scaleX(-1) 会让文字左右颠倒（比如 “Hello” 变成 “olleH”），这不是“反向滚动”，而是视觉翻转。若硬要这么用：
- 必须对子元素再套一层
transform: scaleX(-1)把文字扳正，否则可读性归零 - 动画位移值也要同步取反（比如原本
translateX(-100%)得改成translateX(100%)） - 会干扰事件坐标、焦点顺序、屏幕阅读器，无障碍支持直接崩坏
真正可靠的做法：用 @keyframes 控制位移方向
滚动本质是位置变化，反向 = 从右往左动 → 改起始/结束位移值即可。例如：
@keyframes scrollLeft {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@keyframes scrollRight {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
关键点：
- 滚动方向由
0%和100%的translateX符号决定，不是靠镜像 - 用
infinite+linear保证匀速循环 - 容器需设
overflow: hidden，否则看到滚动出界 - 若内容宽度不足，先用
white-space: nowrap防止换行打断滚动
现代替代方案：用 scroll() API 或第三方库更可控
纯 CSS 动画在长文本或动态内容下容易卡顿、跳帧。如果需要暂停/加速/响应式重置：
- 用
requestAnimationFrame+scrollLeft手动驱动容器滚动，方向由步长正负控制 - 考虑轻量库如
smooth-scrolling或locomotive-scroll，它们内部已处理反向逻辑和浏览器兼容性 - 特别注意 Safari 对
marquee的兼容性补丁早已失效，别抱幻想
最常被忽略的是：滚动区域的宽度计算必须包含所有子元素总宽，否则反向时首尾衔接会露白——这点在用 JS 控制时尤其容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
