Tailwind CSS自定义动画失效及复杂动画实现咨询

问题1：自定义bounce-slow动画未生效的原因 #

在Tailwind 2.x版本中，自定义动画必须同时定义关键帧（keyframes）和动画规则，仅在animation字段注册名称是无效的。你大概率只添加了animation配置项，遗漏了对应的keyframes定义。

另外，修改tailwind.config.js后，必须重启Webpack开发服务，确保配置变更被重新编译到最终样式文件中——这是很多人容易忽略的步骤。

问题2：添加关键帧与复杂动画的实现步骤 #

Tailwind 2.x通过tailwind.config.js的theme.extend扩展自定义动画，分两步完成：

1. 在配置文件中定义关键帧和动画规则 #

在theme.extend下分别添加keyframes和animation字段：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 第一步：定义关键帧，语法和原生CSS一致
      keyframes: {
        'bounce-slow': {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-20px)' },
        },
        // 示例：多阶段复杂动画序列
        'fade-scale-in': {
          '0%': { opacity: '0', transform: 'scale(0.8) translateY(10px)' },
          '60%': { opacity: '1', transform: 'scale(1.05) translateY(-2px)' },
          '100%': { opacity: '1', transform: 'scale(1) translateY(0)' },
        }
      },
      // 第二步：注册动画规则，关联关键帧并设置动画属性
      animation: {
        'bounce-slow': 'bounce-slow 2s ease-in-out infinite',
        'fade-scale-in': 'fade-scale-in 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
      },
    },
  },
  plugins: [],
}

2. 在HTML元素上应用动画类 #

使用animate-前缀加上你定义的动画名称即可：

<!-- 慢弹跳动画 -->
<div class="w-20 h-20 bg-blue-500 animate-bounce-slow"></div>

<!-- 复杂淡入缩放动画 -->
<div class="p-4 bg-green-500 text-white animate-fade-scale-in">复杂动画元素</div>

额外排查要点 #

• 检查最终编译后的CSS文件，确认是否包含你的自定义@keyframes和animation规则，以此验证Webpack是否正确处理了Tailwind配置。
• 确保你的Webpack配置已按照官方要求引入Tailwind的基础样式、组件类和工具类（比如在入口CSS文件中添加@tailwind base; @tailwind components; @tailwind utilities;）。

内容的提问来源于stack exchange，提问作者Sujar Hada