transition
定义CSS 过渡属性，让属性值在一段时间内平滑变化而非瞬间跳变
transition 是「状态 A 到状态 B」的补间动画：指定属性、时长、缓动函数和延迟，当属性因 hover / class 切换而改变时，浏览器自动生成中间帧。四个子属性简写为 transition: property duration timing-function delay。
transition 的触发依赖「状态变化」本身——它不能自己启动，必须由 hover、:checked、class 增删等引起属性改变。要无需触发的连续动画，用 @keyframes + animation。
- 可过渡的属性：颜色、长度、transform、opacity、box-shadow 等；
- 性能优先过渡 transform 和 opacity（走合成器，不触发重排）；
- cubic-bezier() 自定义缓动，ease-in-out 是最稳的默认值。
CSS
.btn { transition: transform .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
⚠ 常见误区
- 别在 transition 里写 all，会意外过渡 width/height 造成卡顿
- 时长 150~300ms 最自然，超过 500ms 用户会嫌慢
- transition 不会对 display:none → block 的显示过程生效