transition-property用于指定触发动画过渡的CSS属性，可选值包括none、all及具体属性名，常与transition-duration等配合使用以精确控制动效，如仅对背景色和文字颜色应用过渡，提升性能与体验。
在CSS中，transition-property 属性用于指定哪些CSS属性在发生改变时应该应用过渡动画效果。它是CSS过渡（transition）的四个子属性之一，其他三个分别是 transition-duration、transition-timing-function 和 transition-delay。
transition-property 的作用
该属性定义了哪一个或多个CSS属性的变化会触发动画过渡。如果不设置这个属性，或者设为 none，则不会对任何属性应用过渡效果；如果设为 all（默认值），则所有可动画的属性变化都会触发过渡。
常见可添加过渡的属性包括：
- 颜色类：color, background-color, border-color
- 尺寸类：width, height, font-size
- 位置类：margin, padding, left, top, transform 等
- 透明度：opacity
语法与取值
基本语法如下：
立即学习“前端免费学习笔记（深入）”；
transition-property: property | none | all | property1, property2, ...;常用值说明：
- none：不为任何属性应用过渡
- all：对所有可动画属性应用过渡（默认）
- 具体属性名：如 width, background, opacity 等，只对该属性生效
- 多个属性用逗号分隔：可以精确控制多个特定属性的过渡行为
示例：
transition-property: width;只有 width 变化时有过渡效果。
transition-property: background-color, transform;当背景色或变换属性变化时，才触发过渡。
transition-property: none;禁用所有过渡效果，即使设置了 duration 也不会生效。
配合完整 transition 使用
虽然可以单独设置 transition-property，但通常我们会使用简写属性 transition 来一次性定义所有过渡参数。
例如：
transition: width 0.5s ease-in-out, background-color 0.3s linear;这行代码等价于分别设置：
- transition-property: width, background-color;
- transition-duration: 0.5s, 0.3s;
- transition-timing-function: ease-in-out, linear;
注意：当定义多个属性过渡时，各子属性的值顺序要对应，否则可能导致部分无效。
实际应用场景
合理使用 transition-property 能提升性能和用户体验。比如按钮悬停时只需过渡背景色和边框，不需要让所有属性都缓慢变化。
例子：只让背景色和文字颜色平滑变化
button {background-color: blue;
color: white;
transition-property: background-color, color;
transition-duration: 0.3s;
}
button:hover {
background-color: red;
color: yellow;
}
这样就不会影响其他可能变化的属性，避免不必要的动画干扰。
基本上就这些。掌握 transition-property 可以让你更精细地控制页面动效，让交互更流畅、更专业。不复杂但容易忽略细节。
