transition-property 可同时指定多个属性，需用逗号分隔；仅列出的可插值属性（如 opacity、transform）才触发过渡，display 等离散属性无效；避免使用 all，推荐显式声明关键属性。
transition-property 能否同时指定多个 CSS 属性
可以，transition-property 支持用逗号分隔多个属性名，只有被列出的属性变化时才会触发动画。没列出来的属性（比如 opacity 或 transform）即使变了也不会过渡。
- 合法写法：
transition-property: width, height, background-color; - 不合法写法：
transition-property: width height background-color;（缺少逗号会整个声明失效） - 注意大小写：CSS 属性名必须用标准小写形式，
BackgroundColor或BGColor都无效 - 简写属性如
border、margin不推荐直接写——浏览器行为不一致，建议拆成border-width、border-color等具体子属性
哪些属性能被 transition-property 控制
不是所有 CSS 属性都支持过渡。只有「可计算、可插值」的属性才行，比如 color、font-size、left、top；而 display、z-index、content 这类离散型或无中间状态的属性无法过渡。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 常见可用属性：
opacity、transform、width、height、padding、margin、background-color - 常见不可用属性：
display（切换none↔block无过渡）、visibility（只有 visible/hidden 两个状态）、font-family（字体不可插值） -
transform和opacity是性能最优的选择，触发 GPU 加速，比left/top更流畅
transition-property: all 的隐患
虽然 transition-property: all 看起来省事，但实际项目中容易引发意外动画，尤其在组件复用或第三方样式介入时。
- 它会让所有可过渡属性都生效，包括你没意识到的，比如
box-shadow或outline的微小变化 - 某些属性过渡可能产生卡顿（如
height触发重排），而all无法针对性优化 - 调试困难：当某个属性意外动起来，很难快速定位是哪个 CSS 规则触发的
- 更稳妥的做法是显式列出关键属性，例如：
transition-property: transform, opacity, color;
transition 声明顺序与 fallback 行为
transition 是复合属性，如果同时写了 transition 简写和 transition-property 单独声明，后者会覆盖前者中对应的字段——但仅限同一条规则内。跨选择器时以层叠顺序为准。
- 下面这段代码中，
transition-property会覆盖transition简写里的属性列表：div { transition: all 0.3s ease; transition-property: width, height; } - 如果某条规则只写了
transition: 0.2s;，没写property，默认等价于transition-property: all; - 浏览器不支持某个属性过渡时（比如旧版 Safari 对
filter），会静默忽略该属性，其余仍正常工作
transition-property 列表中。很多人卡在 DOM 更新后没触发重绘，或者用了 display: none 导致元素脱离文档流——这些都不是 transition-property 能解决的问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
