Tailwind CSS V4 过渡与动画完整教程（Transition & Animation）

Tailwind CSS V4 对过渡与动画系统进行了底层重构，基于原生 CSS 变量与标准 API，相比 V3 更规范、性能更强、能力更全面。新增 transition-behavior 过渡行为控制、原生 @starting-style 零 JS 入场动画、全新主题级自定义动画语法、更精细的时长/缓动档位，同时修复了 V3 动画叠加失效、首次无动画、性能浪费等问题。

本文为 V4 官方标准完整版教程，涵盖过渡系统、缓动曲线、时长延迟、持续关键帧动画、入场出场动画、自定义动画、业务模板、避坑指南，文末附带可直接运行的综合 Demo，可作为项目开发唯一参考文档。

一、V4 动画系统核心升级（必看）

• 全新 transition-behavior：支持离散/连续过渡，解决属性闪烁、布局抖动问题（V4 独有）
• 原生 @starting-style 变体：元素首次渲染、新增 DOM 自动入场动画，彻底告别 JS 控制入场状态
• 过渡属性范围微调：默认 transition 新增适配 outline-color，覆盖更全场景
• 主题级自定义动画：统一在 @theme 内定义 keyframes，天然支持 Tree-Shaking
• 精细化数值体系：时长、延迟、自定义贝塞尔曲线支持任意方括号语法
• 变体执行顺序标准化：hover/active/focus/响应式变体从左至右叠加，逻辑稳定可预测

二、Transition 过渡系统（状态平滑动画）

Transition 用于状态切换动画（hover / focus / active / 显示隐藏），让属性变化从瞬时切换变为平滑过渡。

1. 过渡属性范围（控制哪些属性参与动画）

V4 推荐精准指定过渡属性，替代无脑 transition-all，性能更优。

transition             /* 默认：常用属性过渡（V4 包含 outline-color） */
transition-colors      /* 颜色、背景色、边框色 */
transition-opacity     /* 透明度 */
transition-shadow      /* 阴影 */
transition-transform   /* 缩放、位移、旋转（GPU加速，性能最高） */
transition-none        /* 禁用所有过渡 */

2. V4 新增：过渡行为 transition-behavior

V4 重磅新增，用于控制离散属性是否允许过渡，彻底解决文字、布局属性切换闪烁问题。

transition-normal      /* 默认：仅可插值属性过渡（颜色/透明度/尺寸） */
transition-discrete     /* 支持离散属性过渡，适配 display、content 切换动画 */

3. 过渡时长 duration（动画速度）

前端通用规范：微交互 150–200ms，弹窗/卡片 300ms，慢速展示 500ms。

duration-75 duration-100 duration-150
duration-200  /* 按钮、图标、hover 首选 */
duration-300  /* 弹窗、卡片、模块切换首选 */
duration-500 duration-700 duration-1000

4. 缓动函数 easing（运动曲线）

ease-linear     /* 匀速运动（进度条、loading） */
ease-in         /* 先慢后快（入场加速） */
ease-out        /* 先快后慢（出场减速，最柔和） */
ease-in-out     /* 先慢后快再慢（通用万能，UI首选）

5. 延迟 delay（延迟触发动画）

delay-75 delay-100 delay-150
delay-200 delay-300 delay-500

6. V4 标准过渡组合公式（可直接复用）

/* 按钮微交互标准 */
transition duration-200 ease-in-out/* 卡片悬浮标准 */
transition-all duration-300 ease-in-out
/* 弹窗淡入标准 */
transition-opacity duration-300 ease-out

三、Animate 预设关键帧动画（持续循环动画）

animate 用于持续、循环、常驻动效，无需状态触发，页面加载即执行。

animate-none        /* 清除动画 */
animate-spin        /* 顺时针旋转（loading、刷新） */
animate-pulse       /* 呼吸渐变（待机、提示、占位） */
animate-bounce      /* 上下弹跳（引导、提示） */
animate-ping        /* 波纹扩散（消息红点、直播状态） */
animate-fade-in     /* 淡入 */
animate-scale-in    /* 缩放进入

四、V4 核心黑科技：@starting-style 入场动画

V4 原生支持 CSS 标准 @starting-style，实现零 JavaScript 首次入场动画。解决 V3 最大痛点：动态创建的弹窗、Toast、下拉框、新增元素第一次显示无动画。

标准入场模板（项目通用）

<div class="transition-all duration-300 ease-out @starting-style:opacity-0 @starting-style:scale-95">
  零 JS 弹窗/模块入场动画
</div>

动画逻辑：元素初始状态透明、缩小95% → 自动平滑过渡到正常状态。

五、V4 新版自定义动画（官方规范）

V4 彻底改变自定义动画方式，不再依赖tailwind.config，统一在 @theme 中定义 keyframes，支持按需加载、Tree-Shaking，更轻量化。

主题级自定义动画（推荐）

<style type="text/tailwindcss">
  @theme {
    @keyframes float {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .animate-float {
      animation: float 3s ease-in-out infinite;
    }
  }
</style><div class="animate-float">悬浮浮动动画</div>

任意值快速自定义（临时场景）

<div class="animate-[float_3s_ease-in-out_infinite]"></div>
<div class="duration-[800ms] ease-[cubic-bezier(0.2,0,0.2,1)]"></div>

六、企业级高频业务模板（直接投产）

1. 按钮标准交互动效

<button class="transition duration-200 hover:scale-105 active:scale-95">
  悬浮放大、按压缩小
</button>

2. 卡片悬浮抬升阴影加深

<div class="transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
  高级悬浮卡片
</div>

3. 消息红点波纹动画

<span class="relative inline-flex h-2 w-2">
  <span class="animate-ping absolute h-full w-full rounded-full bg-red-500/60"></span>
  <span class="relative rounded-full h-2 w-2 bg-red-500"></span>
</span>

4. 零 JS 弹窗入场动画

<div class="transition-all duration-300 ease-out @starting-style:opacity-0 @starting-style:scale-95">
  弹窗内容
</div>

5. 平滑颜色切换

<div class="transition-colors duration-300 hover:bg-blue-500 hover:text-white">
  颜色平滑过渡
</div>

七、V4 动画避坑清单（新旧差异）

• ❌ 禁止滥用 transition-all 大面积模块，会监听全部属性，造成性能浪费
• ❌ V4 默认 transition 包含 outline-color，轮廓闪烁优先用 transition-xxx 精准限定
• ❌ 动画时长不要超过 500ms，过长会显卡顿、拖沓
• ✅ 位移/缩放动画优先 transition-transform，开启 GPU 加速，性能最优
• ✅ 所有弹窗、下拉、Toast 必须加 @starting-style，解决首次无动画问题
• ✅ 自定义动画优先 @theme 语法，优于配置文件，更贴合 V4 设计理念
• ✅ 离散属性动画异常时，开启 transition-discrete 修复抖动

八、完整可运行 V4 动画综合 Demo

包含 V4 独有入场动画、过渡行为、悬浮交互、加载动画、波纹提示、自定义浮动动画，可直接打开预览。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS V4 Transition & Animation Demo</title>
  <!-- ✅ Tailwind V4 官方 Play CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

  <style type="text/tailwindcss">
    /* ✅ V4 @theme 标准写法 */
    @theme {
      /* 定义动画变量，格式 --animate-自定义名称: 动画参数 */
      --animate-float: float 3s ease-in-out infinite;

      /* 关键帧写在 @theme 内部 */
      @keyframes float {
        0%, 100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-10px);
        }
      }
    }
  </style>
</head>
<body class="p-10 bg-slate-100 space-y-8">
  <h1 class="text-3xl font-bold text-slate-800">Tailwind CSS V4 动画演示</h1>

  <!-- 1. @starting-style 零JS入场动画（V4独有，刷新页面查看） -->
  <div class="p-6 bg-blue-500 text-white rounded-xl shadow-lg transition-all duration-500 ease-out
    @starting-style:opacity-0 @starting-style:scale-95">
    ✨ V4 原生入场动画
  </div>

  <!-- 2. 卡片悬浮：精准指定 transform + shadow 过渡，性能优先 -->
  <div class="p-6 bg-white rounded-xl shadow-md transition-transform transition-shadow duration-300 ease-in-out
    hover:-translate-y-1 hover:shadow-xl">
    卡片悬浮抬升（精准过渡，不滥用transition-all）
  </div>

  <!-- 3. 按钮交互：hover放大，active点击按压 -->
  <button class="px-8 py-3 bg-emerald-500 text-white rounded-lg transition duration-200 ease-in-out
    hover:scale-105 active:scale-95">
    悬浮放大｜点击按压
  </button>

  <!-- 4. Loading 旋转 animate-spin -->
  <div class="flex items-center gap-3">
    <div class="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
    <span class="text-slate-700">加载中……</span>
  </div>

  <!-- 5. 消息红点波纹 animate-ping -->
  <div class="relative inline-flex h-3 w-3">
    <span class="animate-ping absolute h-full w-full rounded-full bg-red-500/60"></span>
    <span class="relative rounded-full h-3 w-3 bg-red-500"></span>
  </div>

  <!-- 6. 自定义浮动动画，使用 @theme 定义的 animate-float -->
  <div class="p-6 bg-white rounded-xl shadow-md animate-float text-center font-medium text-slate-700">
    V4 @theme 自定义浮动动画
  </div>

  <!-- 7. 颜色过渡 transition-colors 仅过渡颜色相关属性 -->
  <div class="p-4 bg-slate-200 rounded-lg transition-colors duration-300 ease-in-out
    hover:bg-blue-500 hover:text-white text-center">
    仅颜色平滑过渡（transition-colors）
  </div>

  <!-- 8. 呼吸动画 animate-pulse -->
  <div class="p-4 bg-amber-500 text-white rounded-lg animate-pulse text-center">
    animate-pulse 呼吸闪烁动画
  </div>

  <!-- 9. 任意值语法：自定义时长、贝塞尔曲线（V4支持方括号任意值） -->
  <div class="p-4 bg-indigo-500 text-white rounded-lg transition-all duration-[800ms] ease-[cubic-bezier(0.1,0,0.3,1)]
    hover:scale-105">
    自定义时长与贝塞尔曲线
  </div>

</body>
</html>

九、全文总结

Tailwind CSS V4 动画系统完成了从「工具级」到「工程级」的升级：新增 transition-behavior 解决过渡抖动、@starting-style 实现原生零JS入场、@theme 自定义动画更规范轻量化，同时过渡精度、性能、兼容性全面优于 V3。

开发核心口诀：状态切换用 transition、常驻动效用 animate、首次入场 starting-style、微交互200ms、弹窗300ms、精准属性过渡优先、自定义动画走 @theme。

Tailwind CSS V4 过渡与动画 速查表

说明：基于 Tailwind CSS v4 官方语法，适配 Play CDN / NPM 工程，区分过渡、内置动画、自定义动画、@starting-style，方便开发直接复制。

一、transition 过渡基础

1. 过渡属性（控制哪些属性参与动画）

2. 过渡时长 duration

自定义任意时长语法：duration-[800ms]

3. 缓动函数 ease

自定义贝塞尔曲线：ease-[cubic-bezier(0.1,0,0.3,1)]

4. 延迟 delay

delay-75 / delay-100 / delay-150 / delay-200 / delay-300 / delay-500
自定义延迟：delay-[400ms]

5. V4 新增 transition-behavior

二、内置 animate 预设动画

三、V4 独有：@starting-style 入场动画（零JS）

作用：DOM首次渲染自动执行入场动画，解决V3第一次弹出无动画的痛点

<!-- 标准弹窗入场模板 -->
<div class="transition-all duration-300 ease-out
  @starting-style:opacity-0 @starting-style:scale-95">
  弹窗内容
</div>

• 初始状态：opacity:0 + scale:0.95
• 目标状态：元素默认样式，自动平滑过渡

四、V4 自定义动画标准写法（重点！V4语法）

❌ V3写法（不能用）：直接在@theme内写css类
✅ V4写法：在@theme中定义--animate-xxx变量，关联keyframes

<style type="text/tailwindcss">
@theme {
  /* 注册动画：--animate-自定义名称: 关键帧名 时长 缓动 循环 */
  --animate-float: float 3s ease-in-out infinite;  /* 定义关键帧 */
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}
</style>
<!-- 使用 -->
<div class="animate-float">浮动动画</div>

快速行内任意值动画（临时使用）

<div class="animate-[float_3s_ease-in-out_infinite]"></div>

五、高频业务复用片段（直接复制）

<!-- 1. 按钮标准交互 -->
<button class="transition duration-200 ease-in-out hover:scale-105 active:scale-95">
  按钮
</button><!-- 2. 卡片悬浮抬升（性能优选，不用transition-all） -->
<div class="transition-transform transition-shadow duration-300 ease-in-out hover:-translate-y-1 hover:shadow-xl">
  卡片
</div>
<!-- 3. 仅颜色过渡 -->
<div class="transition-colors duration-300 hover:bg-blue-500 hover:text-white">
  颜色过渡
</div>
<!-- 4. 消息红点波纹 -->
<div class="relative inline-flex h-3 w-3">
  <span class="animate-ping absolute h-full w-full rounded-full bg-red-500/60"></span>
  <span class="relative rounded-full h-3 w-3 bg-red-500"></span>
</div>

六、避坑清单

1. 优先使用精准过渡属性（transition-transform），不要无脑写 transition-all，大面积元素会造成性能损耗
2. V4自定义动画必须通过--animate-name变量注册，不能直接在@theme写class
3. CDN调试使用：@tailwindcss/browser@4，生产环境推荐NPM打包
4. 动画时长建议：微交互 200ms，弹窗 300ms；超过500ms容易显得拖沓
5. @starting-style属于CSS原生特性，不需要额外配置，适合弹窗、下拉、toast

七、速记口诀

状态切换用 transition，常驻动效用 animate；
入场动画 starting-style，微交互200弹窗300；
transform动画性能高，自定义动画走 @theme。