过渡Transition

视觉效果与操作状态

让两个界面状态之间平滑变化

先知道

悬停 Hover按下 Active

过渡适合按钮变色、开关移动等只有起点和终点的变化。通常需要指定变化属性、时长和缓动 Easing；不要默认过渡所有属性，并为减少动态效果的用户降低非必要运动。

悬停我← 真的会变（transition）

分帧示意：颜色一格一格变过去，而不是瞬间跳变

什么时候用

让按钮和链接的悬停颜色平滑变化
保存→保存
明确写出变化属性、时长和缓动 Easing
property: backgroundduration: .25seasing: ease-out
200~300ms 甜区：交互反馈干净利落，不拖也不急
100ms 太急250ms ✓600ms 太肉
优先过渡 transform 和透明度 Opacity等流畅属性

什么时候不用

不要默认使用 transition: all，以免无关属性也产生动画
transition: all连 width、padding 的意外变化也被动画
时长超过 500ms：界面肉，用户以为没点上
hover
1.5s 的变色，慢到像没响应
忘了写 transition：颜色瞬间跳变，生硬廉价
⚡
谨慎过渡宽高，位移和缩放优先使用 transform
→
过渡 width/height 会触发重排，卡

组成结构 · Anatomy

默认→悬停property: backgroundduration: 250mseasing: ease-out

1状态变化Trigger悬停、选中等状态切换，是过渡的起点

2过渡属性Property指定哪个属性渐变，别写 all

3时长Duration变多久，交互反馈 200~300ms

4缓动Easing速度曲线，决定渐变的气质

常见变体 · Variants

颜色过渡Color

→

悬停变色、选中态切换

变换过渡Transform

浮起

浮起滑入用 transform，性能最好

透明度过渡Opacity

淡入淡出的入场与退场

典型使用场景

按钮悬停变色

写下你的想法…

🖱️

→ 悬停时 background 用 250ms 渐变过去

开关拨动滑移

新消息提醒

每周精选邮件

深色模式

滑块靠 transform 平移 200ms 滑过去（左侧残影是轨迹）

卡片悬停浮起

官网改版

昨天更新

徒步相册

2 小时前

🖱️

团建报名

3 天前

translateY(-5px) + 阴影，250ms 浮起；移开同样顺滑回落

弹窗淡入淡出

确认退出登录？

未保存的草稿会自动保留。

弹窗与遮罩 opacity 渐变 250ms