transition: all 不会过渡所有属性，仅对支持CSS动画的属性（如color、transform）生效，对display、height:auto等无效，且易引发性能问题和行为不一致。
transition: all 会过渡所有可动画属性吗
不会。transition: all 只对「支持 CSS 动画的属性」生效，比如 color、opacity、transform、background-color，但对 display、height（当值为 auto 时）、font-size（部分旧浏览器）等无效或表现异常的属性，过渡会被忽略或直接跳变。
更关键的是：all 会把所有变化的属性都拉进过渡队列，哪怕你只改了 z-index（不可动画），也会触发重排+无意义过渡开销。
- 不要用
transition: all 0.3s做“偷懒式通用过渡” - 如果只希望
background-color和transform过渡，all会错误地拖入box-shadow、border等你没打算动的属性 -
all的行为在不同浏览器中一致性较差，尤其涉及clip-path或自定义属性时
正确写法：显式声明多个属性 + 时间/函数/延迟
用逗号分隔多个 transition-property 声明，并统一或分别指定持续时间、缓动函数和延迟。推荐统一写法，清晰且易维护。
button {
background-color: #007bff;
transform: scale(1);
transition-property: background-color, transform;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
也可以合并成单行（注意逗号位置）：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
立即学习“前端免费学习笔记（深入）”；
button {
transition: background-color 0.2s ease-in-out,
transform 0.2s ease-in-out;
}
- 每个属性后必须跟完整的时间+函数，不能写成
transition: background-color, transform 0.2s（这样只有transform有过渡） - 如果某属性需要不同持续时间，比如
opacity要 0.1s，transform要 0.3s，就得分开写全：opacity 0.1s, transform 0.3s - 避免混用
transition简写和单独的transition-property，CSS 层叠可能覆盖预期
transition 多属性声明的常见坑
最典型的问题不是语法错，而是「过渡没生效」或「意外触发」。
- 写了
transition: color 0.3s, width 0.3s，但width从100px改成auto→ 不过渡，auto不是可插值长度 - 用了
transition: all 0.3s，然后 JS 动态加class改了display: none→ 页面闪一下，因为display不支持过渡，但all仍尝试触发重排 - CSS 中写了
transition: opacity 0.3s，JS 里用el.style.opacity = 0.5没问题；但如果用el.classList.add('fade-out')，而该 class 里同时改了opacity和visibility→visibility不过渡，但元素可能提前消失，导致过渡被截断
什么时候可以放心用 transition: all
极少数可控场景下可用，但需严格约束：
- 组件内部完全受控，且只修改已知可动画属性（如图标按钮只动
color、transform、filter） - 配合
will-change: transform提前提示浏览器优化，且确认不触发布局抖动 - 仅用于原型或内部工具，不面向兼容性要求高的生产环境
真实项目中，显式列出要过渡的属性，比依赖 all 更可靠、更易调试、性能更可预期。
