English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 过渡与动画：transition属性与animate预设动画

1. 过渡属性（transition-*）

过渡类控制元素状态变化时的平滑动画效果。

类名 CSS 值 说明
transition transition-property: color, background-color, border-color, ... 常用属性过渡
transition-all transition-property: all 所有属性过渡
transition-colors transition-property: color, background-color, border-color, ... 仅颜色过渡
transition-opacity transition-property: opacity 仅透明度过渡
transition-shadow transition-property: box-shadow 仅阴影过渡
transition-transform transition-property: transform 仅变换过渡
transition-none transition-property: none 无过渡

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡属性演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- transition 颜色过渡 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-colors 颜色过渡</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
          颜色过渡
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-700 hover:text-yellow-200 transition-colors duration-300">
          背景+文字过渡
        </button>
        <button class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-lg hover:border-purple-700 hover:text-purple-700 transition-colors duration-300">
          边框过渡
        </button>
      </div>
    </div>

    <!-- transition-opacity 透明度过渡 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-opacity 透明度过渡</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-blue-500 rounded-lg hover:opacity-50 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          悬停变半透明
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg opacity-50 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          悬停变完全不透明
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg hover:opacity-0 transition-opacity duration-500 flex items-center justify-center text-white text-xs">
          悬停渐隐
        </div>
      </div>
    </div>

    <!-- transition-shadow 阴影过渡 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-shadow 阴影过渡</h3>
      <div class="flex gap-4">
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-lg transition-shadow duration-300 flex items-center justify-center text-sm">
          小阴影
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-xl transition-shadow duration-300 flex items-center justify-center text-sm">
          大阴影
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-2xl hover:shadow-blue-500/50 transition-shadow duration-300 flex items-center justify-center text-sm">
          彩色阴影
        </div>
      </div>
    </div>

    <!-- transition-transform 变换过渡 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-transform 变换过渡</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          放大
        </div>
        <div class="w-24 h-24 bg-red-500 rounded-lg hover:rotate-12 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          旋转
        </div>
        <div class="w-24 h-24 bg-teal-500 rounded-lg hover:-translate-y-2 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          上移
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 69 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写 transition: color 0.3s ease, background-color 0.3s ease 等属性，而 Tailwind 使用 transition-colors duration-300 等类名直接声明。

💡 提示： transition 类默认过渡 color、background-color、border-color、opacity、box-shadow、transform 等常用属性。

2. 过渡时长（duration-*）

duration-* 类控制过渡动画的持续时间。

类名 CSS 值 说明
duration-75 transition-duration: 75ms 极快
duration-100 transition-duration: 100ms 很快
duration-150 transition-duration: 150ms 快
duration-200 transition-duration: 200ms 较快
duration-300 transition-duration: 300ms 正常（默认）
duration-500 transition-duration: 500ms 较慢
duration-700 transition-duration: 700ms 慢
duration-1000 transition-duration: 1000ms 很慢

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡时长演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">不同过渡时长对比</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-75</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-75"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-150</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-150"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-300</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-300"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-500</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-orange-500 rounded-lg hover:w-full transition-all duration-500"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-1000</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-red-500 rounded-lg hover:w-full transition-all duration-1000"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">悬停色块查看不同过渡时长效果</p>
    </div>
  </div>
</body>
</html>
逻辑代码 49 行（超过 40 行限制，仅展示）
💡 提示： 一般交互元素（按钮、链接）使用 duration-150 或 duration-200，较大动画使用 duration-300 或 duration-500。

3. 缓动函数（ease-*）

ease-* 类控制过渡动画的加速度曲线。

类名 CSS 值 说明
ease-linear transition-timing-function: linear 匀速
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1) 慢开始
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1) 慢结束
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) 慢开始慢结束

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>缓动函数演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">不同缓动函数对比</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-linear</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-1000 ease-linear"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-1000 ease-in"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-1000 ease-out"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-purple-500 rounded-lg hover:w-full transition-all duration-1000 ease-in-out"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">悬停色块查看不同缓动函数效果</p>
    </div>
  </div>
</body>
</html>
逻辑代码 43 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)，而 Tailwind 使用 ease-in-out 类名直接声明。

4. 过渡延迟（delay-*）

delay-* 类控制过渡动画的延迟时间。

类名 CSS 值 说明
delay-0 transition-delay: 0ms 无延迟
delay-75 transition-delay: 75ms 75ms 延迟
delay-100 transition-delay: 100ms 100ms 延迟
delay-150 transition-delay: 150ms 150ms 延迟
delay-300 transition-delay: 300ms 300ms 延迟
delay-500 transition-delay: 500ms 500ms 延迟
delay-700 transition-delay: 700ms 700ms 延迟
delay-1000 transition-delay: 1000ms 1000ms 延迟

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡延迟演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">交错动画效果（使用 delay）</h3>
      <div class="flex gap-4 justify-center">
        <div class="w-16 h-16 bg-blue-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-0"></div>
        <div class="w-16 h-16 bg-green-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-75"></div>
        <div class="w-16 h-16 bg-yellow-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-150"></div>
        <div class="w-16 h-16 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-300"></div>
        <div class="w-16 h-16 bg-red-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-500"></div>
      </div>
      <p class="text-sm text-gray-500 mt-4 text-center">悬停查看交错动画效果</p>
    </div>

    <!-- 交错入场动画 -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
      <h3 class="font-semibold mb-6">交错入场动画</h3>
      <div class="space-y-3">
        <div class="p-4 bg-blue-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0s_forwards]">
          第 1 项（延迟 0ms）
        </div>
        <div class="p-4 bg-green-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.1s_forwards]">
          第 2 项（延迟 100ms）
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.2s_forwards]">
          第 3 项（延迟 200ms）
        </div>
        <div class="p-4 bg-orange-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.3s_forwards]">
          第 4 项（延迟 300ms）
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 41 行（超过 40 行限制，仅展示）
💡 提示： 使用 delay-* 配合不同的延迟值可以创建交错动画效果，让多个元素依次出现。

5. 预设动画（animate-*）

Tailwind 提供 4 个预设动画类。

类名 CSS 值 说明
animate-spin 旋转动画 适用于加载图标
animate-ping 弹出动画 适用于通知脉冲
animate-pulse 脉冲动画 适用于骨架屏
animate-bounce 弹跳动画 适用于箭头提示

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预设动画演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- animate-spin 旋转 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-spin 旋转动画</h3>
      <div class="flex gap-8 items-center">
        <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div class="w-12 h-12 border-4 border-green-500 border-t-transparent border-r-transparent rounded-full animate-spin"></div>
        <svg class="w-12 h-12 text-purple-500 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 12h4z"></path>
        </svg>
      </div>
    </div>

    <!-- animate-ping 弹出 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-ping 弹出动画</h3>
      <div class="flex gap-8 items-center">
        <div class="relative">
          <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
          <div class="absolute inset-0 w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
        </div>
        <div class="relative">
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="absolute inset-0 w-8 h-8 bg-green-500 rounded-full animate-ping opacity-75"></div>
        </div>
        <button class="relative px-6 py-3 bg-red-500 text-white rounded-lg">
          通知
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping"></span>
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full"></span>
        </button>
      </div>
    </div>

    <!-- animate-pulse 脉冲 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-pulse 脉冲动画</h3>
      <div class="flex gap-8 items-center">
        <div class="w-16 h-16 bg-blue-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-green-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-purple-200 rounded-lg animate-pulse"></div>
      </div>
      <!-- 骨架屏示例 -->
      <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
          <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
            <div class="h-3 bg-gray-200 rounded animate-pulse w-1/2"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- animate-bounce 弹跳 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-bounce 弹跳动画</h3>
      <div class="flex gap-8 items-center justify-center">
        <svg class="w-8 h-8 text-blue-500 animate-bounce" 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 class="w-8 h-8 bg-green-500 rounded-full animate-bounce"></div>
        <div class="w-8 h-8 bg-orange-500 rounded-lg animate-bounce"></div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 69 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写 @keyframes 和 animation 属性，而 Tailwind 使用 animate-spin、animate-pulse 等类名直接应用预设动画。

💡 提示： animate-ping 通常配合绝对定位使用，创建脉冲通知效果。animate-pulse 适合骨架屏加载效果。

6. 自定义 Keyframes

使用 Tailwind 配置或 @theme 指令可以定义自定义动画。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义 Keyframes 演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in: fadeIn 0.5s ease-out;
      --animate-fade-in-up: fadeInUp 0.5s ease-out;
      --animate-slide-in-left: slideInLeft 0.5s ease-out;
      --animate-scale-in: scaleIn 0.3s ease-out;
      --animate-shake: shake 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

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

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 自定义动画 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">自定义动画</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-blue-50 rounded-lg text-center animate-fade-in">
          <div class="text-2xl mb-2">fadeIn</div>
          <div class="text-sm text-gray-600">淡入</div>
        </div>
        <div class="p-4 bg-green-50 rounded-lg text-center animate-fade-in-up">
          <div class="text-2xl mb-2">fadeInUp</div>
          <div class="text-sm text-gray-600">上滑淡入</div>
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg text-center animate-slide-in-left">
          <div class="text-2xl mb-2">slideInLeft</div>
          <div class="text-sm text-gray-600">左侧滑入</div>
        </div>
        <div class="p-4 bg-purple-50 rounded-lg text-center animate-scale-in">
          <div class="text-2xl mb-2">scaleIn</div>
          <div class="text-sm text-gray-600">缩放进入</div>
        </div>
      </div>
    </div>

    <!-- shake 抖动动画 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">shake 抖动动画</h3>
      <div class="flex gap-4">
        <input type="text" placeholder="输入框"
               class="flex-1 p-3 border border-red-300 rounded-lg animate-shake focus:outline-none focus:border-red-500">
        <button class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600">
          提交
        </button>
      </div>
      <p class="text-sm text-red-500 mt-2">输入错误时使用 shake 动画提示</p>
    </div>

    <!-- 动画控制 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">动画控制</h3>
      <div class="flex gap-4 flex-wrap">
        <div class="w-16 h-16 bg-blue-500 rounded-lg animate-spin [animation-play-state:paused] hover:[animation-play-state:running] flex items-center justify-center text-white text-xs cursor-pointer">
          悬停播放
        </div>
        <div class="w-16 h-16 bg-green-500 rounded-lg animate-bounce [animation-iteration-count:3] flex items-center justify-center text-white text-xs">
          弹跳3次
        </div>
        <div class="w-16 h-16 bg-purple-500 rounded-lg animate-pulse [animation-direction:alternate] flex items-center justify-center text-white text-xs">
          交替方向
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 102 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 文件中定义 @keyframes 并编写 animation 属性，而 Tailwind v4 的 @theme 指令可以直接定义动画变量，配合 animate-* 类使用。

⚠️ 注意： Tailwind CDN 模式下，@theme 指令需要放在 <style type="text/tailwindcss"> 标签中才能生效。

7. 综合示例

结合过渡与动画，创建一个完整的交互效果示例。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过渡与动画综合示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in-up: fadeInUp 0.6s ease-out forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 交互式卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=20" alt="卡片"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">查看详情</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">悬停效果卡片</h4>
          <p class="text-gray-600 text-sm">图片放大、遮罩显示、文字滑入</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=21" alt="卡片"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:rotate-3">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">查看详情</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">旋转效果卡片</h4>
          <p class="text-gray-600 text-sm">图片旋转、遮罩显示、文字滑入</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=22" alt="卡片"
               class="w-full h-full object-cover transition-all duration-500 group-hover:brightness-125">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">查看详情</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">亮度效果卡片</h4>
          <p class="text-gray-600 text-sm">亮度增强、遮罩显示、文字滑入</p>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">加载状态动画</h3>
      <div class="flex gap-8 items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <span class="text-sm text-gray-600">加载中</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
          </div>
          <span class="text-sm text-gray-600">跳动加载</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.15s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.3s;"></div>
          </div>
          <span class="text-sm text-gray-600">脉冲加载</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 96 行（超过 40 行限制，仅展示）

❓ 常见问题

Q transition 和 transition-all 有什么区别？
A transition 过渡常用属性（颜色、背景、边框、阴影、变换等），transition-all 过渡所有可过渡属性。一般推荐使用 transition，性能更好。
Q 如何让动画只播放一次？
A 使用 [animation-iteration-count:1] 或在 @theme 中定义动画时设置 animation-fill-mode: forwards 保持最终状态。
Q 过渡动画不生效怎么办？
A 检查是否添加了 transition 类，确认属性是否可过渡（display 不可过渡），检查 duration 是否为 0。
Q 如何实现交错动画？
A 使用 delay-* 类为多个元素设置不同的延迟时间。例如 5 个元素分别使用 delay-0、delay-75、delay-150、delay-300、delay-500。

📖 小节

📝 作业

  1. ⭐ 创建一个按钮组件，使用 transition-colors duration-200 实现悬停时背景色和文字颜色的平滑过渡

  2. ⭐⭐ 创建一个加载指示器，使用 animate-spin 实现旋转圆环，配合 animate-pulse 实现脉冲效果

  3. ⭐⭐⭐ 创建一个图片画廊，使用 transition-all duration-300 和 group-hover: 实现悬停时图片放大、遮罩显示、标题滑入的组合动画效果

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏