前端

过渡Transition

你可能会说

按钮变色太突兀了，能不能慢慢变过去？

控制 CSS 属性在不同状态转换过程中产生平滑渐变的动画机制。按钮悬停变色、开关滑块移动等只有起点和终点的变化适合 transition。应明确变化属性、时长和缓动 Easing；不要默认写 transition: all，宽高等可能触发布局计算的属性也要谨慎，并为减少动态效果的用户降低非必要运动。

也常被叫作平滑过渡过渡效果CSS过渡

悬停我← 真的会变（transition）

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

组成结构 · Anatomy

默认→悬停transition-property: backgroundtransition-duration: .25stransition-timing-function: ease-out

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

明确列出需要过渡的属性，避免用 all 意外影响其他变化

变化持续多久；按距离、任务和减少动态效果偏好测试

时间曲线函数，控制属性渐变的速度分布

常见变体 · Variants

颜色过渡Color

→

悬停变色、选中态切换

变换过渡Transform

浮起

浮起滑入用 transform，性能最好

透明度过渡Opacity

淡入淡出的入场与退场

典型使用场景

按钮悬停变色

写下你的想法…

🖱️

→ transition: background .25s ease

开关拨动滑移

新消息提醒

每周精选邮件

深色模式

滑块通过 transform 平移；左侧残影表示运动轨迹

卡片悬停浮起

官网改版

昨天更新

徒步相册

2 小时前

🖱️

团建报名

3 天前

悬停时用 transform 与阴影提供过渡反馈，移开后平滑回落

弹窗淡入淡出

确认退出登录？

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

弹窗与遮罩 opacity 以 opacity 平滑过渡