过渡动画

Transition

也常被叫作：动画动效切换效果淡入淡出hover 效果过渡效果

风格与视觉通常止于「主路径」约 2 分钟读完

你可能会这么说

「鼠标放上去、弹窗出现、页面切换时的那段小动画，别太长别太花。」

过渡动画 Transition

状态变化时的一小段平滑过渡，0.15-0.3 秒就该结束，太长拖慢操作、太花抢注意力。

过渡是元素从状态 A 变到状态 B 时的中间帧：鼠标放上按钮颜色渐变、弹窗淡入、页面切换时内容滑入。它的作用有两个：让用户感知到变化发生了（而不是「啪」地跳变），以及让用户知道变化从哪来。没有过渡的界面不是不行，只是变化显得生硬；过渡滥用才是更大的问题。

过渡只有两个可观察的参数：时长和缓动。时长的舒适区在 0.15-0.3 秒：这是「点击有反馈」的感知窗口，超过 0.4 秒用户就开始等，超过 0.6 秒就明显烦躁。弹窗这类整块出现的可以到 0.3-0.4 秒，但也不该更久。缓动（easing）应该用「快进慢出」（ease-out）——变化先快后慢，收尾优雅；匀速或慢进快出都显得机械。

过度设计的三种典型：全站每个元素 hover 都放大 1.1 倍，页面像在蠕动；入场动画 1 秒起，用户每次打开都等；动画拖慢操作——动画播完前按钮不可点。还有一层容易漏：系统开了「减少动态效果」（prefers-reduced-motion）时，动画应该关闭或显著减弱，这是用户能感知到的可访问性问题。给 AI 下单时，把「时长范围」「哪些元素可以有动画、哪些禁止」「动画不能阻塞操作」写死。

长什么样真实可交互，不是截图

✓ 快进慢出，0.3 秒内收尾

hover 变色 0.15s→弹窗淡入 0.3s→动画不挡点击

✕ 动画失控每个元素 hover 都放大 1.1 倍
入场动画 1 秒，打开一次等一次
动画播完前按钮点不了

左：动画只存在于「变化发生的那一下」，0.15-0.3 秒结束，不抢注意力。右：满屏蠕动、1 秒入场、动画阻塞操作——三种最常见的过度设计。

拆开看，里面有这几块

1
时长 Duration
动画从开始到结束的毫秒数。0.15-0.3 秒是反馈区，别超过 0.5 秒。
2
缓动 Easing
变化的速度曲线。推荐 ease-out（快进慢出），不要匀速。
3
触发条件 Trigger
什么情况下播动画：hover、focus、弹窗开关、页面切换。
4
减少动态 Reduced motion
用户系统开启「减少动态效果」时，动画应关闭或显著变短。

常见的有哪几种

瞬时反馈Instant

0.1-0.2 秒，几乎感觉不到但变化不生硬。

用在：hover 变色、按下反馈

标准过渡Standard

0.2-0.3 秒，最常见的过渡时长。

用在：菜单展开、卡片悬停升档

入场动画Entrance

0.3-0.4 秒，用于整块内容出现。

用在：弹窗、页面切换

无动画None

完全没有过渡。

用在：数据刷新、高频操作、减少动态模式

容易搞混？这样区分

过渡动画 ≠ 动画 Animation

过渡（transition）是「状态 A → B 的补间」，由属性变化触发；动画（animation）是独立的动作脚本，可以自己播放多帧（比如一直转圈的加载图标）。日常说「加个动画」可能指前者，下单时点名要哪种。

过渡动画 ≠ 延迟 Delay

时长是动画播多久（0.2s）；延迟是等多久才播（0.5s 后才开始）。「打开页面等半秒才看到内容」通常是延迟问题，不是时长问题——别让 AI 去改时长。

过渡动画 ≠ 加载动画 Loading indicator

过渡是「变化过程的修饰」；加载动画是「等待过程的安抚」（转圈、进度条）。提交按钮转圈是加载，hover 变色是过渡，两种需求别混为一谈。

什么时候用得上

hover 反馈

按钮、卡片悬停时 0.15 秒变色或微升，让用户知道「可以点」。

弹窗开关

弹窗 0.3 秒淡入，关闭时同样快速淡出，不要「关闭还要等 1 秒」。

页面切换

内容滑入或淡入 0.3 秒内完成，不阻碍首屏阅读。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】给 [范围] 加一套过渡动画，参数先定死
【参数】
  - hover 变色 / 微升：0.15 秒，快进慢出（ease-out）
  - 弹窗淡入淡出：0.3 秒
  - 页面切换：0.3 秒内完成
【规则】
  - 只给 [hover、弹窗、页面切换] 这几处加动画，其他地方禁止
  - 不许 hover 放大元素、不许元素满屏位移、不许 1 秒以上的动画
  - 动画播放期间不能阻塞点击和操作
  - 系统开了「减少动态效果」时动画要关闭或显著变短
【边界】不动颜色、布局、间距、字号
【交付】列出改了哪些文件、每处动画的时长和缓动值；我打开哪个地址悬停 / 开关哪个元素能看到；你怎么验证动画不阻塞操作；你没验证的部分单独说

把「时长范围 + 哪些地方可以动 + 哪些禁止 + 不阻塞操作」写死，AI 才不会做出 1 秒入场、满屏蠕动的效果。减少动态这一条单独写，因为它最容易被漏且是真实的可访问性问题。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

悬停一个按钮，变色在 0.2 秒左右完成，不是 1 秒慢悠悠变。
打开和关闭弹窗总时长都在 0.5 秒以内，关闭不用等。
动画期间你依然能立刻点击和输入，没有「等动画播完」的阻塞。
页面里没有每个元素都在动的「蠕动感」：大部分元素静止，只有触发的那几个在动。
系统设置里打开「减少动态效果」，刷新后动画消失或显著变短，页面依然能用。

它常这么糊弄你

「加了丝滑的动画」——但实测 hover 要 1 秒才变完，点一下等半天。用秒表或开发者工具看 transition 的时长值。
「入场动画很炫」——但每次打开页面先等 1 秒动画，用户会觉得慢。首屏内容不该被动画挡着。
「hover 加了放大效果」——但每个元素都放大，页面像在蠕动。放大只该给真正要强调的一两个元素。
「动画完成」——但动画播完前按钮不可点，用户连点没反应。动画永远不该阻塞操作。

过渡这类任务最高能验到「主路径」层：用秒表或开发者工具看 transition 的时长、缓动值，自己就能量。重点查「时长是否在 0.3 秒左右」和「动画是否阻塞操作」，不要被「丝滑」这种形容词糊弄。

考考你选一个你觉得对的

弹窗打开时要播一段 1 秒的淡入动画，AI 说「这样更有仪式感」。你怎么看？

想再深挖一点靠谱出处

transition（过渡）MDN ↗prefers-reduced-motion（减少动态效果）MDN ↗

# 过渡动画 (Transition)

> 状态变化时的一小段平滑过渡，0.15-0.3 秒就该结束，太长拖慢操作、太花抢注意力。

**你可能会这么说**：鼠标放上去、弹窗出现、页面切换时的那段小动画，别太长别太花。

过渡是元素从状态 A 变到状态 B 时的中间帧：鼠标放上按钮颜色渐变、弹窗淡入、页面切换时内容滑入。它的作用有两个：让用户感知到变化发生了（而不是「啪」地跳变），以及让用户知道变化从哪来。没有过渡的界面不是不行，只是变化显得生硬；过渡滥用才是更大的问题。 过渡只有两个可观察的参数：时长和缓动。时长的舒适区在 0.15-0.3 秒：这是「点击有反馈」的感知窗口，超过 0.4 秒用户就开始等，超过 0.6 秒就明显烦躁。弹窗这类整块出现的可以到 0.3-0.4 秒，但也不该更久。缓动（easing）应该用「快进慢出」（ease-out）——变化先快后慢，收尾优雅；匀速或慢进快出都显得机械。 过度设计的三种典型：全站每个元素 hover 都放大 1.1 倍，页面像在蠕动；入场动画 1 秒起，用户每次打开都等；动画拖慢操作——动画播完前按钮不可点。还有一层容易漏：系统开了「减少动态效果」（prefers-reduced-motion）时，动画应该关闭或显著减弱，这是用户能感知到的可访问性问题。给 AI 下单时，把「时长范围」「哪些元素可以有动画、哪些禁止」「动画不能阻塞操作」写死。

**也叫**：动画、动效、切换效果、淡入淡出、hover 效果、过渡效果

## 你可以这样告诉 AI

```text
【任务】给 [范围] 加一套过渡动画，参数先定死
【参数】
  - hover 变色 / 微升：0.15 秒，快进慢出（ease-out）
  - 弹窗淡入淡出：0.3 秒
  - 页面切换：0.3 秒内完成
【规则】
  - 只给 [hover、弹窗、页面切换] 这几处加动画，其他地方禁止
  - 不许 hover 放大元素、不许元素满屏位移、不许 1 秒以上的动画
  - 动画播放期间不能阻塞点击和操作
  - 系统开了「减少动态效果」时动画要关闭或显著变短
【边界】不动颜色、布局、间距、字号
【交付】列出改了哪些文件、每处动画的时长和缓动值；我打开哪个地址悬停 / 开关哪个元素能看到；你怎么验证动画不阻塞操作；你没验证的部分单独说
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 悬停一个按钮，变色在 0.2 秒左右完成，不是 1 秒慢悠悠变。
- [ ] 打开和关闭弹窗总时长都在 0.5 秒以内，关闭不用等。
- [ ] 动画期间你依然能立刻点击和输入，没有「等动画播完」的阻塞。
- [ ] 页面里没有每个元素都在动的「蠕动感」：大部分元素静止，只有触发的那几个在动。
- [ ] 系统设置里打开「减少动态效果」，刷新后动画消失或显著变短，页面依然能用。

常见糊弄：
- 「加了丝滑的动画」——但实测 hover 要 1 秒才变完，点一下等半天。用秒表或开发者工具看 transition 的时长值。
- 「入场动画很炫」——但每次打开页面先等 1 秒动画，用户会觉得慢。首屏内容不该被动画挡着。
- 「hover 加了放大效果」——但每个元素都放大，页面像在蠕动。放大只该给真正要强调的一两个元素。
- 「动画完成」——但动画播完前按钮不可点，用户连点没反应。动画永远不该阻塞操作。

来源：https://mickerbook.com/reference/t/transition/