transition-property 仅指定参与过渡的CSS属性，不控制值范围；它只接受属性名列表或all/none，对无效属性名或不可动画属性（如display）完全无效，需与duration等配合使用。
transition-property 只能控制「哪些属性」参与过渡，不能控制「过渡的值范围」
很多人以为 transition-property 能像动画关键帧那样限定起始/结束值，其实它只是个“开关清单”：开就过渡，关就不动。真正决定「从哪到哪」的是属性本身的值变化（比如从 opacity: 0 到 opacity: 1），transition-property 对这个过程不干预。
- 它只接受 CSS 属性名列表（如
opacity、transform、color），或关键字all/none - 写错属性名（比如拼成
opactiy）或用了不支持过渡的属性（如display、z-index），该属性完全不会动，也不报错 -
all看似省事，但会把所有可动画属性都拉进来，可能触发意外重排或性能抖动（比如无意中让width和height同时过渡）
哪些 CSS 属性能被 transition-property 有效启用
不是所有属性都能过渡，只有「有明确中间计算值」的属性才支持。浏览器内部要能插值，比如颜色、长度、角度；而像 visibility 或 font-family 这类离散型属性，即使写进 transition-property 也无效。
- 可靠支持的：
opacity、transform、background-color、left/top（需配合position）、font-size - 部分支持但易踩坑：
width/height（触发布局重排，性能差；优先用transform: scale()替代） - 完全不支持：
display、visibility、z-index、content、font-family - 注意
border类属性：单独写border不生效，得拆成border-width或border-color
transition-property 和 transition 的其他部分怎么配合
transition-property 必须和 transition-duration、transition-timing-function 配合才有意义。它们可以合并写在 transition 简写里，但顺序和数量必须严格对应——这是最容易出错的地方。
- 简写中多个过渡定义用逗号分隔：
transition: opacity 0.3s, transform 0.2s ease-out; - 如果只写一个
duration，它会作用于所有列出的property；想给不同属性配不同时间，就得一一对应写全：transition: opacity 0.3s, transform 0.2s; - 漏掉
duration（比如只写transition-property: opacity;），过渡完全不会发生——没有默认时长 - 用
transition: all 0.3s;时，后续新增的可动画属性（比如后来加了filter）也会自动参与，但不可控，调试困难
真正在意“范围”的时候，该换思路
如果你实际想控制的是「过渡只在某个数值区间内生效」（比如只在滚动到某位置后才启动 opacity 过渡），transition-property 做不到。这时候得靠 JS 控制 class 切换时机，或者用 @keyframes + animation 配合 animation-fill-mode 和 JS 动态设置 animation-delay 或 animation-play-state。
立即学习“前端免费学习笔记（深入）”；
- 过渡（
transition）本质是「响应式」的：依赖属性值变化触发，没有主动控制点 - 动画（
animation）才是「声明式」的，能精确控制每一步，适合复杂范围逻辑 - 用
will-change: opacity;提前告知浏览器优化目标属性，对性能有帮助，但别滥用——它本身不触发过渡，只是提示
