Tailwind CSS 动画 #

<!-- 无限旋转 -->
<div class="animate-spin">
  <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
</div>

<!-- 脉冲效果 -->
<div class="relative">
  <div class="absolute h-3 w-3 rounded-full bg-blue-500 opacity-75 animate-ping"></div>
  <div class="relative h-3 w-3 rounded-full bg-blue-500"></div>
</div>

<!-- 淡入淡出脉冲 -->
<div class="animate-pulse bg-gray-200 h-4 w-32 rounded"></div>

<!-- 上下弹跳 -->
<div class="animate-bounce">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
  </svg>
</div>

<!-- 运行（默认） -->
<div class="animate-spin animate-running">运行中</div>

<!-- 暂停 -->
<div class="animate-spin animate-paused">暂停</div>

<div class="animate-spin hover:animate-paused">
  悬停暂停
</div>

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

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

<button class="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded" disabled>
  <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  <span>加载中...</span>
</button>

<div class="relative">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
  </svg>
  <span class="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full">
    <span class="absolute inset-0 bg-red-500 rounded-full animate-ping"></span>
  </span>
</div>

<div class="animate-pulse space-y-4">
  <div class="h-4 bg-gray-200 rounded w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
  <div class="h-4 bg-gray-200 rounded w-5/6"></div>
</div>

<div class="animate-bounce text-gray-400">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
  </svg>
</div>

<style>
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

<div class="animate-[fadeIn_0.5s_ease-in-out]">
  淡入内容
</div>

<style>
  @keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
</style>

<div class="animate-[slideIn_0.3s_ease-out]">
  滑入内容
</div>

<style>
  @keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
</style>

<div class="animate-[scaleIn_0.2s_ease-out]">
  缩放内容
</div>

<div class="space-y-2">
  <div class="animate-[fadeIn_0.5s_ease-in-out] [animation-delay:0ms]">项目 1</div>
  <div class="animate-[fadeIn_0.5s_ease-in-out] [animation-delay:100ms]">项目 2</div>
  <div class="animate-[fadeIn_0.5s_ease-in-out] [animation-delay:200ms]">项目 3</div>
  <div class="animate-[fadeIn_0.5s_ease-in-out] [animation-delay:300ms]">项目 4</div>
</div>

<div class="w-full bg-gray-200 rounded-full h-2">
  <div class="bg-blue-500 h-2 rounded-full animate-pulse" style="width: 45%"></div>
</div>

<style>
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  @keyframes blink {
    50% { border-color: transparent }
  }
</style>

<div class="overflow-hidden whitespace-nowrap border-r-2 border-gray-900 animate-[typing_3s_steps(40)_infinite,blink_0.5s_step-end_infinite]">
  打字效果动画
</div>