Tailwind CSS v4 中自定义 @keyframes 动画的正确写法

在 Tailwind CSS v4 版本中，开发者有时会遇到自定义动画不生效的问题。本文将通过一个典型示例，详细讲解如何正确地在 Tailwind CSS 中定义和使用 @keyframes 动画。

问题背景

许多开发者在 Tailwind CSS v4 中尝试自定义动画时，会遇到动画效果不生效的情况。虽然动画名称和类名都能正确生成，但浏览器却无法加载实际的动画效果。这通常是由于 CSS 语法错误导致的。

错误示例分析

以下是一个常见的错误写法示例：

@theme {
  --animate-fade-in: fade-in 0.6s ease-in;

  @keyframes fade-in {
    0%: {
      opacity: 0;
    }

    100%: {
      opacity: 1;
    }
  }
}

这段代码看似合理，但实际上存在语法错误。在 CSS 的 @keyframes 规则中，百分比后面不应该使用冒号(:)，这是导致动画不生效的根本原因。

正确写法

修正后的代码应该如下：

@theme {
  --animate-fade-in: fade-in 0.6s ease-in;

  @keyframes fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}

关键点解析

1. @keyframes 语法规则：在 CSS 中定义动画关键帧时，百分比数字后面直接跟花括号，不需要冒号。

2. @theme 指令：这是 Tailwind CSS v4 中用于定义主题变量的特殊指令，可以包含动画定义。

3. 动画变量定义：--animate-fade-in 是一个自定义 CSS 变量，包含了动画名称、持续时间和缓动函数。

最佳实践建议

1. 使用现代 CSS 预处理器或 PostCSS 可以帮助捕获这类语法错误。

2. 在开发过程中，定期检查浏览器开发者工具中的"Styles"面板，确认 @keyframes 规则是否被正确解析和应用。

3. 对于复杂的动画序列，建议先在独立的 CSS 文件中测试，确认无误后再集成到 Tailwind 配置中。

通过理解这些细节，开发者可以避免在 Tailwind CSS v4 中定义动画时遇到的常见陷阱，确保自定义动画能够按预期工作。