支持 transition-property 的是可动画化（animatable）CSS 属性，如 color、opacity、transform、width 等；display、position、font-family 等不可动画化属性无效；需查 MDN 的「Animatable」字段确认。
哪些 CSS 属性支持 transition-property
不是所有 CSS 属性都能做过渡，transition-property 只对「可动画化」（animatable）的属性生效。比如 color、opacity、transform、width、height、margin、padding 都可以；但 display、position、z-index、font-family 这类不支持——改了也不会产生过渡效果。
查具体支持情况，最可靠的方式是看 MDN 上每个 CSS 属性文档页的「Animatable」字段，例如 MDN width#animatable 明确写 yes。
-
transition-property: all会尝试对所有可动画属性生效，但容易误触（比如无意中触发box-shadow或filter的过渡） -
transition-property: none表示禁用过渡，即使写了transition-duration也无效 - 多个属性用逗号分隔：
transition-property: color, transform, opacity
transition-property 和 transition 值顺序是否必须对应
不必须。CSS 的 transition 简写属性（如 transition: color 0.3s, transform 0.2s ease-in）确实要求每个子项按「property duration timing-function delay」顺序一一对应；但单独写 transition-property 时，它只管“哪些属性动”，其余行为由独立声明的 transition-duration、transition-timing-function 等控制，且这些值是「全局 fallback」——没为某属性单独指定时，就用默认值。
- 如果只设
transition-property: color, transform和transition-duration: 0.3s，那么两个属性都用 0.3s - 若想给不同属性配不同时间，必须用简写
transition拆开写，或用多个transition声明（后者兼容性稍差） - 注意：重复声明
transition会覆盖前一个，不是叠加
常见踩坑：transition-property 写错名或拼写大小写
CSS 属性名区分大小写仅在 XML 模式（如 XHTML）下严格生效，但在 HTML 中浏览器基本忽略大小写；不过实际开发中仍建议严格按标准小写写法，避免混淆和工具链报错。
- 写成
Transition-Property或TRANSITION-PROPERTY不报错，但可读性差，且某些 CSS 预处理器或 lint 工具会警告 - 别把属性名和值搞混：比如
transition-property: background是对的，但transition-property: background-color才是真正控制背景色过渡（background是复合属性，其过渡行为不可靠） -
transition-property: flex无效，要拆成flex-grow、flex-shrink、flex-basis单独写 - 自定义属性（CSS 变量）默认不可过渡，需配合
@property显式注册为可动画类型
性能敏感场景下如何精简 transition-property
过渡属性越多，重绘/重排压力越大，尤其在移动端或低端设备上。应只对视觉变化明显、用户可感知的属性启用过渡，避开触发 layout 的属性（如 width、height、top、left），优先选 transform 和 opacity——它们走合成层，不触发重排。
- 推荐组合：
transition-property: transform, opacity，搭配will-change: transform, opacity（谨慎使用） - 避免写
transition-property: all在列表项或滚动容器上，容易导致卡顿 - 用 DevTools 的 Rendering 面板勾选「Paint flashing」或「FPS meter」观察实际渲染开销
- 动画开始前再加 transition（比如 hover 时才设置），比常驻 transition 更省资源
过渡真正生效的前提，是属性值发生了「可计算的数值变化」——比如从 opacity: 1 到 opacity: 0.5，而不是从 opacity: unset 到 opacity: 0.5。这点容易被忽略，但直接决定动画会不会动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
