transition-property 仅对可动画化属性生效，如color、opacity、transform等；display、position等不可插值属性无效。需精确列举目标属性，避免与transition简写混用，且其值由变化前最终匹配的样式决定。
transition-property 只对哪些属性起作用
transition-property 不是万能开关，它只对「可动画化」的 CSS 属性生效。比如 color、opacity、transform、width、height（需有明确数值）、background-color 都可以；但 display、position、z-index、font-family 这类不可插值的属性设了也无效，浏览器直接忽略。
常见误操作：写成 transition-property: all 后发现 display: none → block 没过渡——不是 bug，是规范限制，display 本身不支持过渡。
用 transition-property 精确控制过渡目标
想只让颜色和透明度动，其他不动？直接列出来：
button {
transition-property: color, opacity;
transition-duration: 0.3s;
}
这样即使你同时改了 padding 或 border，它们也不会参与过渡。
立即学习“前端免费学习笔记（深入）”；
注意点：
-
transition-property: none表示完全禁用过渡，哪怕写了transition-duration也无效 - 多个属性用逗号分隔，不能用空格或
and - 写错属性名（如
bg-color）不会报错，但该条声明被静默丢弃 - 缩写属性如
margin可以设，但实际触发的是margin-top、margin-right等子属性的分别过渡
transition-property 和 transition 的简写冲突问题
如果用了 transition 简写（如 transition: all 0.2s ease;），它会覆盖之前单独写的 transition-property 声明——CSS 层叠规则决定后声明优先。
所以别混用：
- ❌ 先写
transition-property: opacity;，再写transition: all 0.2s;→ 实际生效的是all - ✅ 要么全用简写：
transition: opacity 0.2s, transform 0.2s; - ✅ 要么全用独立属性，且确保
transition-property在transition简写之后（不推荐，易混乱）
伪类和动态类切换时 property 的匹配逻辑
transition-property 是在「样式计算完成时」确定的，不是在状态变化那一刻才读取。也就是说，只要元素当前样式规则里定义了它，后续任何符合该规则的状态切换（比如 :hover、.active）都会按这个 property 列表执行过渡。
典型陷阱：
- 给
.btn设了transition-property: color;，但 hover 里改了background-color→ 没过渡，因为background-color不在 property 列表中 - 用 JS 切换 class，新 class 里新增了
transform，但原 class 没在transition-property里声明 → 依然不触发过渡 - 媒体查询中重定义
transition-property是有效的，但要注意断点切换时的时机，可能造成过渡中断
真正起作用的永远是「触发变化前那一刻」所匹配到的、最终生效的 transition-property 值。
