Tailwind配置文件中，如何设置CSS实现跑马灯动画的无限循环？

本文共计941个文字，预计阅读时间需要4分钟。

在`tailwind.config.js`文件中定义自定义的`@keyframes`是可行的，但必须遵守以下规范：

必须把 keyframes 写在 theme.extend.keyframes 下

Tailwind 不识别 theme.keyframes 或 theme.animation.keyframes 这类路径。只认 theme.extend.keyframes 这个固定位置，且值必须是纯对象：

• 键名只能是 'from'、'to' 或 '0%'、'100%'（不支持中间帧如 '50%'）
• 每个键对应的值必须是合法 CSS 声明字符串，例如 transform: 'translateX(0)'，不能简写成 translateX(0)
• 属性名和冒号之间不能有空格，冒号后必须有单引号包裹的完整声明值

错误示例：{ '0%': 'translateX(100vw)' }（缺 transform:）；正确写法：{ '0%': 'transform: translateX(100vw)' }

animation 工具类要绑定 duration 和 timing-function

theme.extend.animation 里的值不是 CSS 动画名，而是完整的动画声明字符串，格式为：'keyframes-name duration timing-function'：

立即学习“前端免费学习笔记（深入）”；

• duration 必须带单位，如 '2s'、'3000ms'，不能只写 2
• timing-function 推荐用 'linear' 实现匀速滚动；若用 'ease-in-out' 会导致启停卡顿，破坏循环感
• 不支持 iteration-count 或 direction，这些必须靠 HTML 元素 class 或内联样式控制

示例配置：

module.exports = { theme: { extend: { keyframes: { 'marquee': { '0%': 'transform: translateX(100vw)', '100%': 'transform: translateX(-100%)', } }, animation: { 'marquee': 'marquee 8s linear infinite', } } } }

HTML 中使用时需确保元素宽度与动画路径匹配

仅加 animate-marquee 不够 —— 跑马灯失效最常见的原因是元素本身没“跑起来”，根源在布局：

• 父容器建议设 overflow-hidden，否则动画移出区域的内容仍可见
• 滚动元素需设 whitespace-nowrap（如果是文字）或明确 inline-block（如果是图片/子容器），避免换行打断连续位移
• translateX(100vw) 是从视口右边缘开始，translateX(-100%) 是向左移自身宽度；两者配合才能无缝衔接，若用 -100vw 会因容器宽度变化导致跳帧

典型结构：

<div class="overflow-hidden"> <div class="animate-marquee inline-block whitespace-nowrap"> <span>内容1</span> <span>内容2</span> <span>内容3</span> </div> </div>

调试时优先检查生成的 CSS 是否存在

Tailwind 不报错也不提示 keyframes 缺失，它只是静默忽略非法配置。最有效的验证方式是：

• 打开浏览器开发者工具，搜索 @keyframes marquee，确认是否出现在生成的 CSS 中
• 若没出现，回查 tailwind.config.js 是否漏了 extend 层级，或 keyframes 对象被意外写到了 plugins 里
• 若出现但动画不动，用 getComputedStyle 检查元素是否真应用了 animation 属性，常见干扰是父级 display: flex 导致子元素被拉伸变形，影响 translateX 计算

真正容易被忽略的是：Tailwind 的 keyframes 扩展不支持动态参数（比如根据内容宽度自动算 duration），所有时间值都得硬编码，需要滚动速度变化时，只能手动改配置再重启构建。