tailwindcss 笔记

自定义动画

定义动画关键帧 (Keyframes):

在 tailwind.config.js 文件中定义动画的关键帧。 通过 keyframes 属性来定义动画的各个阶段。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        shake: {
          '0%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
          '100%': { transform: 'rotate(-3deg)' },
        },
      },
      animation: {
        'shake': 'shake 0.5s ease-in-out', // 定义动画名称和属性
      },
    },
  },
  plugins: [],
}

应用动画到元素:

需要使用 animate-[animation-name] 类来应用动画。

<button class="hover:animate-shake">
  Shake Me!
</button>