用短过渡改变颜色、边框、阴影，并给键盘保留清晰焦点环。
产品与设计 · 动效
过渡Transition
先定义界面状态，再用明确属性和合适时长连接它们；减少动效时保留状态本身和可理解反馈。
先用实验台看 transition 在做什么
一个保存按钮，点一下切到「已保存」。换过渡策略和时长，看按钮自己和旁边的芯片到底哪里在动、有没有把整行拖走。
反馈实验台
一个「保存设置」按钮，点一下切到「已保存」。换过渡策略和时长，看按钮自己和它旁边的芯片到底哪里在动、有没有把整行拖走。
待记录
点按钮，看它从默认平滑到已保存。当前状态默认过渡值
background-color 180ms ease-out, transform 180ms ease-out反馈等待触发写明属性：只有背景色与位移在 180ms 内平滑，布局不跳。下一步：再点一次回到默认。策略当前：写明属性。
从刚才的操作里提炼
你在实验台上看到的，就是 transition 的全部工作方式。
- 过渡 = 写明的属性 + 时长 + 缓动，把按钮从默认平滑接到已保存；它不创造状态，状态要先定义好。
- 写明属性（如 background-color、transform）只动该动的：颜色平滑，尺寸瞬间到位，行只跳一下就稳定。
- transition: all 会把 padding、宽高也交给过渡，整行被慢慢拖动，看起来卡，还会抖布局——实验台里的「布局被拖」就是这个后果。
- 时长服务于反馈：按钮反馈 150–200ms 足够；过长会让人觉得点下去没响应。
- 减动效取消运动，保留状态：颜色、对号、文字和焦点仍在，结果不被动画藏起来。
- 重要结果不等动画：保存、支付、错误等先出现，再用过渡润色；不要让用户等动画结束才知道发生了什么。
状态先于过渡
先决定控件现在是什么状态，再决定状态之间要不要平滑连接；transition 不是状态本身。切到不同状态，看控件如何进入。
点击状态标签，观察控件如何平滑进入新状态。
当前状态悬停 / 聚焦
鼠标悬停和键盘聚焦都在告诉用户：这里可以继续操作。
按住按钮看按下反馈；切换标签看状态之间的过渡。不要只做 hover；键盘和触摸用户需要同等的状态线索。
正反例：同一反馈，只改一处
围绕同一个状态切换，只改变过渡的写法，看用户后果如何不同。
建议按钮 hover / focus
保存设置
background-color 180ms ease-out反馈及时出现，松开后状态也不会被误认为已选中。
建议面板进出
筛选面板
opacity 160ms + transform 160ms只移动已经占位的面板，不让周围布局跟着跳。
建议开关滑块
已开启
transform 140ms ease滑块跟随一次明确的开关状态变化，减少机械感但不拖延结果。
不建议把所有属性都动画化
布局被拖动
transition: all 2s宽度、边距和布局也会被拖慢或误动画，问题很难定位。
不建议把成功消息延迟出现
结果还没告诉你
成功状态 opacity 1s保存、支付和错误等重要结果不应等待动画结束才让用户知道。
不建议用一次动画代替选中态
选中后又消失
播放后恢复默认动画结束后没有持续状态，用户不知道当前选中了哪一项。
快速自测
按钮反馈的颜色和阴影要平滑，下面哪种写法最稳妥？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。