如何让Tailwind CSS中两个自定义动画同时生效？

问题原因 #

1. 配置覆盖问题：你当前的Tailwind配置中重复定义了animation和keyframes对象，JavaScript对象里重复的键会被后面的覆盖，导致最终只有最后一个动画配置生效，这就是删除其中一个后另一个能正常运行的原因。
2. Transform属性冲突：两个动画都修改了transform属性，CSS中同一元素的transform会被后执行的动画覆盖，无法同时叠加平移和旋转效果。

解决步骤 #

步骤1：修正Tailwind配置，合并动画定义

将两个动画的配置合并到同一个animation和keyframes对象中，避免覆盖：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'down': 'down 2s ease-in-out infinite',
        'shake': 'shake 3s ease-in-out infinite'
      },
      keyframes: {
        'down': {
          '0%' : { transform: 'translate(0, 0)' },
          '1%' : { transform: 'translate(0, 0)' },
          '2%' : { transform: 'translate(0, 0)' },
          '3%' : { transform: 'translate(0, 0)' },
          '5%' : { transform: 'translate(0, 0)' },
          '6%' : { transform: 'translate(0, 0)' },
          '7%' : { transform: 'translate(0, 0)' },
          '8%' : { transform: 'translate(0, 0)' },
          '9%' : { transform: 'translate(0, 0)' },
          '10%' : { transform: 'translate(0, 0)' },
          '11%' : { transform: 'translate(0, 0px)' },
          '100%' : { transform: 'translate(0, 20px)' }
        },
        'shake': {
          '0%' : { transform: 'rotate(0deg)' },
          '1%' : { transform: 'rotate(-20deg)' },
          '2%' : { transform: 'rotate(20deg)' },
          '3%' : { transform: 'rotate(-20deg)' },
          '5%' : { transform: 'rotate(20deg)' },
          '6%' : { transform: 'rotate(-20deg)' },
          '7%' : { transform: 'rotate(20deg)' },
          '8%' : { transform: 'rotate(-20deg)' },
          '9%' : { transform: 'rotate(20deg)' },
          '10%' : { transform: 'rotate(-20deg)' },
          '11%' : { transform: 'rotate(0deg)' },
          '100%' : { transform: 'rotate(0deg)' }
        }
      }
    }
  }
}

步骤2：解决Transform冲突（二选一）

方案A：使用animation-composition让动画叠加

CSS的animation-composition: add属性可以让多个动画的变换效果叠加，而不是覆盖。你可以直接在元素上添加内联样式，或者扩展Tailwind工具类：

内联样式写法：

<div class="animate-down animate-shake" style="animation-composition: add;"></div>

扩展Tailwind工具类写法：
在配置中添加自定义工具类：

// tailwind.config.js
module.exports = {
  // ... 之前的theme配置
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.animation-add': {
          'animation-composition': 'add'
        }
      })
    }
  ]
}

然后使用：

<div class="animate-down animate-shake animation-add"></div>

方案B：合并关键帧为单个动画

如果你不想依赖animation-composition（部分旧浏览器不支持），可以将两个动画的变换逻辑合并到一个关键帧中，创建一个新的复合动画：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'down-shake': 'down-shake 6s ease-in-out infinite' // 取2s和3s的最小公倍数6s，保证动画同步循环
      },
      keyframes: {
        'down-shake': {
          '0%' : { transform: 'translate(0, 0) rotate(0deg)' },
          '1%' : { transform: 'translate(0, 0) rotate(-20deg)' },
          '2%' : { transform: 'translate(0, 0) rotate(20deg)' },
          '3%' : { transform: 'translate(0, 0) rotate(-20deg)' },
          '5%' : { transform: 'translate(0, 0) rotate(20deg)' },
          '6%' : { transform: 'translate(0, 0) rotate(-20deg)' },
          '7%' : { transform: 'translate(0, 0) rotate(20deg)' },
          '8%' : { transform: 'translate(0, 0) rotate(-20deg)' },
          '9%' : { transform: 'translate(0, 0) rotate(20deg)' },
          '10%' : { transform: 'translate(0, 0) rotate(-20deg)' },
          '11%' : { transform: 'translate(0, 0px) rotate(0deg)' },
          '100%' : { transform: 'translate(0, 20px) rotate(0deg)' }
        }
      }
    }
  }
}

使用复合动画类：

<div class="animate-down-shake"></div>

内容的提问来源于stack exchange，提问作者d4rk vader