Tailwind CSS 的动画和过渡效果如何使用，有哪些常用的动画类？

Tailwind CSS 的动画和过渡效果通过内置的工具类实现，让开发者能够轻松创建动态效果。

过渡效果：

• transition：启用所有过渡属性
• transition-none：禁用过渡效果
• transition-all：所有属性都有过渡效果
• transition-colors：颜色属性有过渡效果
• transition-opacity：透明度有过渡效果
• transition-shadow：阴影有过渡效果
• transition-transform：变换有过渡效果

过渡持续时间：

• duration-75：75ms
• duration-100：100ms
• duration-150：150ms
• duration-200：200ms
• duration-300：300ms
• duration-500：500ms
• duration-700：700ms
• duration-1000：1000ms

过渡缓动函数：

• ease-linear：线性缓动
• ease-in：缓入
• ease-out：缓出
• ease-in-out：缓入缓出

过渡延迟：

• delay-75：延迟 75ms
• delay-100：延迟 100ms
• delay-150：延迟 150ms
• delay-200：延迟 200ms
• delay-300：延迟 300ms
• delay-500：延迟 500ms
• delay-700：延迟 700ms
• delay-1000：延迟 1000ms

动画效果：

• animate-none：无动画
• animate-spin：旋转动画
• animate-ping：脉冲动画
• animate-pulse：心跳动画
• animate-bounce：弹跳动画

悬停状态：

• hover：鼠标悬停时应用样式
• 示例：

  html
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    Hover me
  </button>

焦点状态：

• focus：元素获得焦点时应用样式
• 示例：

  html
  <input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 rounded">

活动状态：

• active：元素被激活时应用样式
• 示例：

  html
  <button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded">
    Click me
  </button>

组合状态：

• 可以组合多个状态修饰符
• 示例：

  html
  <button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 text-white px-4 py-2 rounded">
    Button
  </button>

响应式动画：

• 结合响应式前缀使用
• 示例：

  html
  <div class="animate-pulse md:animate-spin">
    响应式动画
  </div>

深色模式动画：

• 结合深色模式使用
• 示例：

  html
  <div class="bg-white dark:bg-gray-900 transition-colors duration-300">
    深色模式过渡
  </div>

自定义动画：

• 在 tailwind.config.js 中配置
• 示例：

  javascript
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
          'fade-in': 'fadeIn 0.5s ease-in',
          'slide-up': 'slideUp 0.5s ease-out',
        },
        keyframes: {
          fadeIn: {
            '0%': { opacity: '0' },
            '100%': { opacity: '1' },
          },
          slideUp: {
            '0%': { transform: 'translateY(100%)' },
            '100%': { transform: 'translateY(0)' },
          },
        },
      },
    },
  }

• 使用自定义动画：

  html
  <div class="animate-fade-in">淡入动画</div>
  <div class="animate-slide-up">上滑动画</div>

最佳实践：

• 合理使用过渡效果，避免过度动画
• 保持动画简洁，提高用户体验
• 测试动画性能，避免卡顿
• 考虑用户偏好设置（减少动画）
• 使用硬件加速（transform、opacity）