transition简写必须显式写出属性名、时长和缓动函数，缺一不可；漏写属性名或仅写时长（如transition: 0.3s）会导致动画失效，因等价于transition-property: all，而all在旧版Safari中不支持transform/opacity且易引发意外重绘。
transition简写里漏写属性名，动画就失效
很多人直接写 transition: 0.3s ease;，以为所有变化都会动——其实这等价于 transition-property: all; transition-duration: 0.3s;，但问题在于：浏览器对 all 的支持不一致，transform、opacity 在旧版 Safari（12 之前）可能被忽略；更糟的是，它会把 box-shadow、border 等你没打算动的属性也拖进过渡队列，引发意外重绘。
真正可控的做法是显式列出属性：transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s linear;
- 每组必须包含「属性 + 时间 + 缓动函数」，缺一不可
- 写成
transition: background-color, transform 0.3s;是错的——只有transform有过渡，background-color被当作文本忽略 - 逗号分隔的是独立规则，不是属性列表，所以不能省略任何一部分
transition-property 和 transition-duration 必须配对生效
transition-property 单独存在毫无作用。只写 transition-property: width, opacity;，没设时间，浏览器按默认 0s 处理，等于瞬间切换。
正确配对方式有两种：
- 分开写：
transition-property: width, opacity;+transition-duration: 0.4s, 0.2s;→ 顺序严格绑定，width用0.4s，opacity用0.2s - 简写合并：
transition: width 0.4s ease, opacity 0.2s linear;→ 更直观，推荐日常使用
注意：transition-duration 是硬门槛，哪怕只是 0.01s 也得显式写出来。
立即学习“前端免费学习笔记（深入）”；
多个transition规则叠加时，以最后声明的为准
CSS 层叠规则照常起效，后写的 transition 会覆盖前面的，而不是合并。
比如：
.box { transition: width 0.2s; }
.box.active { transition: height 0.3s, opacity 0.3s; }
此时 .box.active 元素只会过渡 height 和 opacity，width 变更将无过渡——哪怕它也在状态变化中发生。
- 需要共存时，必须手动合并到同一行声明里
- 避免分散在多个 class 或 BEM 块中，容易遗漏覆盖
- 用 JS 切换 class 控制开关时，
.no-transition { transition-property: none; }才是彻底禁用，只设transition-duration: 0s不够可靠
哪些属性能过渡、哪些不能，得看可插值性
过渡生效的前提是：两个状态之间存在可计算的中间值。像 display: none → block、height: auto → 100px、visibility: hidden → visible 都无法插值，写了也白写。
常见可用属性：opacity、transform、color、background-color、font-size、margin、padding；
常见无效属性：display、z-index、content、font-family、background-image（CSS Images Level 4 才实验性支持）。
-
transform和opacity是性能最优选择，触发 GPU 加速 - 别写
transition-property: "width, height"——引号是非法语法，整条声明失效 - 用开发者工具检查「Computed」面板里的
transition值，确认是否被覆盖或解析错误
