transition-property 仅对可动画化属性生效，如color、opacity、transform等；display、z-index等不可动画属性无效；需查mdn或规范确认animatable字段；应显式声明属性而非用all；过渡需明确起止值且可插值。
transition-property 只对哪些 CSS 属性生效
不是所有 CSS 属性都能做过渡动画。transition-property 只接受「可动画化」（animatable）的属性，比如 color、opacity、transform、width、height（注意：需有明确数值单位）、background-color。但像 display、z-index、font-family、position 这类不可动画化的属性，即使写进 transition-property 也完全无效——浏览器直接忽略，不会报错，也不会回退到 all。
查某个属性是否支持过渡，最可靠的方式是翻 MDN 页面，在该 CSS 属性文档顶部看「Animatable」字段是否标为 ✅；或者直接查 CSS Transitions 规范里的 animatable properties 列表。
用 transition-property 精确控制触发条件
常见错误是写成 transition: all 0.3s，结果鼠标一 hover，连 border-color 和 padding 都动了，视觉上乱跳。真正可控的做法是显式列出要过渡的属性：
button {
color: #333;
background-color: #fff;
border-color: #ccc;
transition-property: color, background-color;
transition-duration: 0.2s;
}
这样只有 color 和 background-color 的变化会触发过渡，其他样式变更（比如 JS 动态加 class 改了 border-width）完全不参与动画。
- 多个属性用逗号分隔，不能用空格或
and - 值为
none表示禁用所有过渡（比注释掉更安全） - 值为
all是危险操作——它会响应任意可动画属性的变化，包括你没意识到的继承值或 UA 样式 - 推荐优先用分离写法（
transition-property+transition-duration），避免transition简写覆盖掉其他子属性
transition 不生效？检查这些隐性依赖
即使 transition-property 写对了，动画也可能静默失败。核心原因是：CSS 过渡需要「起始值 → 终止值」两个明确的、可插值的状态。以下情况会导致过渡被跳过：
- 起始或终止状态中某属性值为
auto（如height: auto→height: 200px） - 颜色从
transparent切到rgba(0,0,0,0)，看似一样，但解析后类型不同（关键字 vs 函数），无法插值 - 使用了未加前缀的
transform，但在旧版 Safari 中需要-webkit-transform才能触发过渡 - 父元素设置了
overflow: hidden，而子元素过渡中尺寸变化导致被裁剪，看起来像“卡住” - JS 直接修改
style属性后立刻读取offsetHeight，触发强制同步布局，打断过渡链
用 will-change 提前提示浏览器优化（谨慎）
will-change 不是过渡的一部分，但它会影响浏览器是否对某个属性启用硬件加速和图层提升——这对 transform 和 opacity 类过渡尤其关键。例如：
.slide-item {
transition-property: transform;
transition-duration: 0.3s;
will-change: transform;
}
但要注意：will-change 开销不小，不该滥用。只在已确认该元素频繁过渡且出现掉帧时才加；过渡结束应主动移除（可用 transitionend 事件），否则图层常驻内存。
真正难搞的从来不是写对 transition-property，而是搞清「谁变了」「怎么变」「浏览器认不认这个变法」——这三个问题卡住的地方，往往不在 CSS 本身，而在 DOM 状态、JS 同步时机或渲染管线底层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
