transition-property用于指定参与过渡的CSS属性，可选值为none、all或具体属性名，常与duration等配合使用，推荐明确指定属性以提升动画性能和可控性。
在CSS中，transition-property 用于指定哪个或哪些CSS属性将参与过渡动画。它是 transition 四个子属性之一（其余为 transition-duration、transition-timing-function、transition-delay），控制着动画作用的范围。
transition-property 基本语法
transition-property: none | all | <property> [, <property>]*;
- none：不指定任何过渡属性，即不触发过渡效果。
- all：对所有可动画的CSS属性都应用过渡效果（默认值）。
- <property>：指定具体的CSS属性名，如 width、opacity、transform 等。
多个属性可用逗号分隔：
transition-property: opacity, transform, width;常见可动画属性示例
并非所有CSS属性都能过渡，只有那些具有中间值的属性才支持动画。以下是一些常用的可动画属性：
立即学习“前端免费学习笔记（深入）”；
- 颜色类：color、background-color、border-color
- 尺寸类：width、height、max-width、min-height
- 位置类：margin、padding、top、left、bottom、right
- 透明度：opacity
- 变换：transform（推荐使用，性能好）
- 阴影：box-shadow、text-shadow
例如，只想让 opacity 和 transform 发生渐变：
transition-property: opacity, transform;transition-duration: 0.5s;
使用 all 和精确控制的区别
设置 transition-property: all 虽然方便，但可能带来性能问题或意外动画。比如某个未预期的属性变化也会触发动画。
- 用 all：简单但不够精准，适合简单交互。
- 明确列出属性：更可控，避免副作用，推荐在复杂场景中使用。
对比示例：
/* 可能导致不必要的动画 */ transition-property: all; transition-duration: 0.3s;/ 更安全的做法 / transition-property: opacity, transform; transition-duration: 0.3s;
与 transition 简写属性的关系
实际开发中常使用简写形式 transition，它能同时设置所有子属性。
transition: opacity 0.4s ease-in-out, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);这种写法等价于分别设置 transition-property、duration、timing-function 和 delay。
注意：当使用简写时，若未指定 property，默认为 all。
基本上就这些。合理设置 transition-property 能让你的动画更流畅、更可控，关键是只对需要的属性启用过渡。
