不能直接用 tailwind 的 animate- 类实现无限跑马灯，因其仅支持简单状态动画，未定义位移循环逻辑，需手动配置 animation 和 keyframes、双倍复制 html 内容、使用 translatex 位移、linear 时序及 hover 暂停等完整方案。
为什么不能直接用 Tailwind 的 animate- 类实现无限跑马灯
Tailwind 自带的 animate-bounce、animate-pulse 等类是为简单状态动画设计的，不支持位移类循环滚动；它们没有定义 @keyframes 的位移逻辑，也没有处理容器宽度、内容复制、无缝衔接等跑马灯必需条件。硬套 animate-[name] 会报错或无效果。
必须手动扩展 tailwind.config.js 中的 animation 和 keyframes
核心是补全两个配置项：一个声明动画名与参数，一个定义关键帧行为。注意路径和单位选择直接影响是否无缝：
-
animation里要指定时长（如20s）、timing-function（必须用linear，否则变速会卡顿）和infinite -
keyframes必须用transform: translateX()，起点设为translateX(100%)（内容完全在容器右侧外），终点设为translateX(-100%)（完全移出左侧） - 若内容块本身有固定宽度（如图片或 flex 项），建议用
vw或具体像素值替代百分比，避免因父容器缩放导致位移不准
HTML 结构必须双倍复制内容才能视觉无缝
纯 CSS 无法运行时拼接 DOM，所以“无限”靠的是结构欺骗：把原始列表完整复制一份拼在后面。例如 6 个 li 要写成 12 个——否则动画播到末尾会突然跳回起点，人眼可见闪动。
常见错误是只复制一半或用 JS 动态追加，这会触发重排，破坏 GPU 加速效果。正确做法是在 HTML 源码里静态写两遍，或构建时由模板引擎生成。
悬停暂停必须用 :hover + animation-play-state，别碰 JS
想支持鼠标悬停暂停，只需在对应元素上加一行 CSS：
.marquee:hover {
animation-play-state: paused;
}
不用监听 mouseenter、不用操作 class、不引入任何 JS。但要注意：animation-play-state 是继承属性，如果父容器也设置了动画，得用 !important 或更精确的选择器覆盖。
移动端需额外加 @media (hover: none) 回退逻辑，否则 touch 设备上 hover 不生效，暂停功能就失效了。
最易被忽略的一点：动画时长必须和内容总宽度匹配。内容变长了，20s 可能太慢；内容变短了，又会太快导致闪。不要写死，建议用 CSS 自定义属性动态传入，或构建时根据内容长度计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
