transition必须写在将要发生变化的元素本身上，而非父元素或触发元素；仅可计算且有中间值的属性（如opacity、transform）支持过渡；需显式声明初始值，避免使用auto等不可插值关键字。
transition 该写在哪个元素上才生效
必须写在「将要发生变化的元素」本身上，而不是它的父元素或触发变化的其他元素。比如 hover 时改变子元素颜色，transition 要加在那个子元素的 css 规则里，不是写在父元素的 :hover 伪类中。
- 错误写法：
.parent:hover .child { color: red; transition: color 0.3s; }—— 这里transition不会生效，因为每次 hover 都是重新计算样式，过渡属性没被“持续声明” - 正确写法：
.child { color: black; transition: color 0.3s; } .parent:hover .child { color: red; } - 如果元素初始状态没有显式设置可过渡属性（如没写
opacity: 1），浏览器可能无法推断起始值，导致过渡不触发
transition-Property 哪些值能真正过渡
不是所有 CSS 属性都支持过渡。只有「可计算、有中间值」的属性才能平滑过渡，比如 opacity、transform、color、width（需有明确单位）、margin 等；而 display、height（从 auto 开始）、z-index、position 本身不能过渡。
-
height: auto→height: 100px：不会过渡，浏览器无法插值计算auto - 替代方案：用
max-height模拟（设一个足够大的固定值），或改用transform: scaleY() -
background-image无法过渡，但background-color可以 - 推荐优先使用
transform和opacity，它们触发 GPU 加速，性能更好，且不会触发重排（reflow）
transition-timing-function 的实际表现差异
transition-timing-function 控制过渡过程中的速度曲线，直接影响交互质感。默认是 ease（慢-快-慢），但容易被误认为“匀速”。真正匀速要用 linear。
-
ease-in：慢启动，适合“弹入”类动效 -
ease-out：慢结束，适合“收尾”动作，比如菜单淡出 -
cubic-bezier(0.2, 0.8, 0.4, 1)：常用缓动，比默认ease更自然，常用于 Material Design - 避免用
steps(5, end)做非逐帧场景——它会把过渡切成 5 步跳跃执行，不是平滑动画
.btn { opacity: 0.6; transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.4, 1); } .btn:hover { opacity: 1; }多个属性过渡如何精准控制
可以用逗号分隔多个 transition 声明，实现不同属性不同持续时间、延迟或缓动函数。但要注意顺序和数量必须严格对应，否则后项会被忽略或错位。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
transition: opacity 0.2s, transform 0.3s ease-out, width 0.4s linear; - 如果只希望某个属性过渡，其他属性立即变化，就把不需要过渡的属性单独写在无
transition的规则里（比如border改变不加过渡） - 慎用
transition: all 0.3s;—— 它会让所有可过渡属性都响应变化，包括你没意识到的（比如意外继承的color），造成不可控的动效 - 用
transition-delay可制造 stagger 效果，但注意它是按声明顺序应用的，不是按 dom 顺序
过渡真正难的不是写法，而是判断「哪里该加、哪里不该加」，以及理解浏览器何时能算出起始/结束值。很多“不动”的问题，其实卡在初始值没声明，或者用了 auto / inherit / unset 这类无法插值的值。