transition-property 必须显式声明，避免使用 transition: all；应精确指定目标属性如 background-color 或 transform,opacity，确保与实际变更的 CSS 属性名严格一致（含横线、全小写），并统一用 class 控制过渡而非内联样式。
transition-property 必须显式声明
直接写 transition: all 0.3s 看似省事，但实际会把所有可动画属性都拉进过渡队列，比如 opacity、transform、background-color 全部一起动——而你可能只想要颜色变，其他不动。浏览器不会智能过滤，它只会按声明执行。
正确做法是用 transition-property 锁定目标属性：
-
transition-property: background-color—— 只响应颜色变化 -
transition-property: transform, opacity—— 多个属性用逗号分隔，中间不能有空格（transform,opacity是合法的，transform, opacity在某些旧引擎里会失效） - 避免混用简写和长写：如果用了
transition: background-color 0.3s，就别再单独设transition-property，否则后者会覆盖前者
为什么 transition: all 不可靠
all 会包含大量“不可控”属性，比如 font-size、line-height、border-width —— 它们虽能动画，但插值行为常不符合预期：字体大小跳变、行高抖动、边框粗细闪烁。更麻烦的是，某些属性根本不能平滑过渡（如 display、z-index），all 会让浏览器默默忽略它们，却不报错，导致调试困难。
常见踩坑场景：
立即学习“前端免费学习笔记（深入）”；
- hover 时同时改了
background-color和padding，结果padding动画卡顿甚至不触发（因 layout 属性不支持平滑插值） - JS 动态加 class，但 class 里含
width和height，二者重排开销大，拖慢整个过渡帧率 - 移动端 WebView 中，
all容易触发强制重绘，造成掉帧或白屏闪动
transition-property 值必须与实际变更属性严格匹配
比如你写了 transition-property: background，但 JS 改的是 element.style.backgroundColor，那过渡不会生效——因为 background 是简写属性，它覆盖的是整个背景声明，而 backgroundColor 是单个子属性，二者在 CSS 引擎里属于不同通道。
务必保持一致性：
- 想过渡颜色，就用
background-color（连横线都不能少） - 想过渡位移，就用
transform，别写translateX（这不是标准 CSS 属性名） - 属性名区分大小写，但 CSS 属性全是小写，所以
backgroundcolor或BackgroundColor都无效
多个 transition 规则叠加时的优先级逻辑
CSS 支持为同一元素写多条 transition 声明，浏览器会合并处理。但顺序和 specificity 很关键：
- 后声明的规则会覆盖同名子属性，例如先写
transition-property: background-color，再写transition: transform 0.2s，最终生效的是transform，background-color的过渡被丢弃 - 用
!important无法提升transition-property优先级，它只对值有效，对属性名无效 - 内联样式里的
style="transition: opacity 0.3s"会覆盖所有外部 CSS 中的transition声明，包括transition-property
真正稳定的做法，是把所有过渡控制收束到一个基础 class 里，靠 class 切换驱动状态，而不是靠 JS 拼接 style 字符串——后者极易破坏过渡链路。
