transition-property 仅对可动画属性生效，如 width、opacity、transform 等；display、z-index、visibility 不可动画。应显式列出属性而非用 all，duration 默认为 0s 是无动画主因。
transition-property 能指定哪些 CSS 属性
transition-property 只对「可动画的 CSS 属性」生效，不是所有样式都能过渡。比如 width、opacity、background-color、transform、font-size 都行；但 display、z-index、visibility（原生）不行——它们没有中间状态，浏览器无法插值计算。
常见可动画属性包括：
-
width/height（需有明确数值，auto不触发过渡） -
margin/padding（同上，不能是auto或百分比混用导致不可算） -
opacity（0 → 1 完全支持） -
color/background-color（支持 RGB、HEX、HSL，不支持transparent到颜色的跨模型插值） -
transform（推荐替代left/top，性能更好）
all 和 none 的实际影响
transition-property: all 看似省事，但隐患大：只要元素任意一个可动画属性变化（比如 JS 改了 font-size 或 box-shadow），就会意外触发过渡，可能拖慢渲染或掩盖真实意图。
transition-property: none 是显式关闭过渡，比不写该属性更可靠——因为不写时会继承父级值，容易被误覆盖。
建议始终显式列出需要过渡的属性，例如：
button {
transition-property: background-color, transform;
transition-duration: 0.2s;
}
这样既可控，又避免干扰其他样式变更。
多个属性配不同 duration 怎么写
当用逗号分隔多个属性时，transition-duration、transition-timing-function、transition-delay 也必须按顺序一一对应。错位会导致后半部分失效。
例如：
div {
transition-property: width, background-color;
transition-duration: 0.6s, 0.2s;
transition-timing-function: ease, linear;
}
表示：width 过渡 0.6 秒 + ease 曲线，background-color 过渡 0.2 秒 + linear 曲线。
注意：transition 简写形式不支持这种多属性差异化配置，必须拆成子属性写。
为什么写了 transition-property 却没动画
最常见原因是漏了 transition-duration：它的默认值是 0s，等于“瞬间完成”，看起来就是无过渡。
其他典型原因：
- 目标属性值不是可计算的（如从
display: none切到block） - 起始/结束值类型不兼容（如
color: red→color: currentColor） - 用了
position: static却想过渡left（left在 static 下无效，无变化） - CSS 优先级冲突，新样式根本没生效，自然没变化可过渡
调试时，先确认浏览器开发者工具里该属性确实在 hover 或 class 切换后发生了数值变化，再看是否带上了 duration。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
