transition: all 仅对可动画的css属性生效，如color、opacity、transform等，但display、z-index等不可插值属性无效；显式声明关键属性更安全可控。
transition: all 会过渡哪些属性
transition: all 并不是真的“所有 CSS 属性”都会被过渡，它只对**可动画的属性**生效。比如 display、z-index、content 这类不可插值的属性，即使写了 all 也不会产生过渡效果。浏览器内部有一份可过渡属性白名单，像 color、opacity、transform、width、height、background-color 等都支持；但 font-size 虽然可过渡，却可能因字体加载或 subpixel 渲染导致视觉跳变。
用 transition: all 时最常踩的坑
看似方便，实际容易引发意外动画：
-
transition: all 0.3s会让所有后续样式变更（包括 JS 动态加 class、伪元素内容变化、甚至outline或box-shadow的微小改动）全都带上过渡，调试时难以定位源头 - 某些属性过渡不自然：比如
height: 0 → auto无法过渡，必须配合max-height或transform: scaleY() - 移动端上
all可能触发不必要的重排（reflow），尤其涉及width/height时，造成卡顿 - 如果父元素有
will-change: transform，而子元素用all过渡left和top，可能因层叠上下文冲突导致动画撕裂
更可控的替代写法：明确列出关键属性
比起 all，显式声明要过渡的属性更安全、意图更清晰，也利于性能优化：
button {
background-color: #ccc;
color: #333;
transform: scale(1);
transition: background-color 0.2s, color 0.2s, transform 0.2s ease-out;
}
button:hover {
background-color: #007bff;
color: white;
transform: scale(1.05);
}
这样写的好处：
立即学习“前端免费学习笔记（深入）”；
- 避免无关属性被意外带动画（如
border-color在 hover 里没改，就不会参与过渡） - 不同属性可用不同持续时间或缓动函数，比如
transform用ease-out，opacity用linear - 便于后续维护：谁看代码都知道哪些状态变化是设计过的动画
需要“全量响应变化”时的务实方案
真有场景需覆盖多数视觉变化（比如组件主题切换、暗色模式切换），不建议依赖 all，而是：
- 用 CSS 自定义属性统一控制可变部分，例如
--bg-primary、--text-emphasis，再对这些变量做transition - 对结构类变化（显示/隐藏、尺寸伸缩）单独用
transform+opacity组合，避开重排 - 用
getComputedStyle(el).getPropertyValue('--my-var')配合 JS 控制过渡时机，比纯 CSSall更可靠
真正难的不是让所有东西动起来，而是让该动的动得准、不该动的不动——all 看似省事，反而掩盖了哪些变化值得被用户感知。
