第八章 · 8.2 节

transition 过渡

当一个属性的值发生变化时（比如鼠标悬停触发的 :hover 状态切换），浏览器默认会瞬间跳变。transition 让这个变化过程"平滑化"，是入门成本最低、收益最直观的动效工具。

四个子属性

属性	作用	默认值
transition-property	指定哪些属性参与过渡	all
transition-duration	过渡时长	0s（不过渡）
transition-timing-function	缓动曲线	ease
transition-delay	延迟开始时间	0s

.btn {
  transition-property: background, transform;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
/* 简写形式，更常用 */
.btn { transition: background .2s ease-out, transform .2s ease-out; }

缓动函数

缓动函数描述"速度如何随时间变化"，选对曲线能让动效感觉更自然，而不是机械的匀速移动。

关键字	速度特征	适合场景
linear	匀速	加载进度条一类机械感场景
ease	先加速后减速（默认）	大多数通用场景
ease-out	快进慢出	元素进入视野、展开
ease-in	慢进快出	元素离开视野、收起
cubic-bezier(x1,y1,x2,y2)	自定义曲线	需要精细调校的品牌动效

悬停对比不同缓动（观察位移的加速/减速手感）

linear

ease-out

回弹曲线

哪些属性可以过渡

并非所有 CSS 属性都能过渡——只有取值可以被"插值计算"的属性才行，比如颜色、长度、透明度、transform 函数的参数。display 这类离散关键字属性无法平滑过渡（要么是 block 要么是 none，中间没有过渡态）。

常见需求：display 切换的过渡较新的浏览器支持把 display 与 content-visibility 加入 transition-property，配合 @starting-style 实现"从 none 淡入"的效果；在此之前，惯用做法是用 visibility + opacity 组合模拟。

多属性差异化过渡

用逗号分隔可以为不同属性设置不同的时长与延迟，让复合动效更有层次：

.dropdown {
  transition:
    opacity .15s ease,
    transform .2s ease-out .05s; /* 位移比透明度晚 50ms 开始 */
}

尊重减弱动效偏好

回顾 3.2 节的 prefers-reduced-motion——凡是引入了 transition/transform 的项目，都应该配套提供减弱版本：

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}