应显式声明需过渡的属性而非使用 transition: all；用 class 切换替代内联样式修改；避免对不支持过渡的属性（如 display）直接设动画；按属性特性差异化设置 duration 与 timing-function。
当多个 CSS 属性同时变化导致动画不自然、难调试时，核心问题往往不是 transition 本身，而是 transition-property 设置得过于宽泛（比如用了 all 或漏写关键属性），让本不该动的属性也参与了过渡。
只对真正需要过渡的属性显式声明
避免使用 transition: all 0.3s ease; 这类“偷懒写法”。它会让所有可动画属性（包括 color、opacity、transform、margin、padding……）都尝试过渡，而很多属性过渡不仅没意义，还可能相互干扰或触发重排。
- 明确写出你要动的属性，例如：
transition: transform 0.3s ease, opacity 0.2s linear; - 如果只希望位移和缩放有动画，就只写
transform；如果还要渐隐，再加opacity；不需要动背景色，就别写background-color - 这样既节省性能，又让行为完全可控——改哪个属性，就只影响哪个动画
用 class 切换代替直接改内联样式
直接通过 JavaScript 修改 style.left、style.top 等会绕过 CSS 声明，导致 transition 失效或行为异常。更可靠的方式是预设好状态类名，用 class 控制变化：
- 在 CSS 中定义：
.box { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1); } .box.active { transform: translateX(100px) scale(1.2); } - JS 只负责切换：
el.classList.add('active');或el.classList.toggle('active'); - 所有过渡逻辑集中在 CSS，便于复用、调试和维护
注意属性是否真正支持过渡
不是所有 CSS 属性都能平滑过渡。例如 display、height（从 0 到 auto）、z-index 等要么不支持，要么效果不可控。遇到这类情况，优先考虑替代方案：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity+visibility替代display显隐 - 用
max-height（设一个足够大的值）过渡替代height: auto - 用
transform: scaleY()模拟高度展开，比直接动 height 更流畅
过渡时间与缓动函数按属性差异化设置
不同属性“动起来”的节奏感不同。比如位移适合稍快+有弹性的缓动，颜色变化则宜更平缓线性：
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s ease-in-out;- 不要所有属性共用同一组 timing-function 和 duration，否则容易显得机械或拖沓
- 浏览器会分别计算每个属性的起止值和插值过程，分开写反而更精准
transition 的本质是“声明式动画控制”，关键在于主动选择、明确限定——不靠猜，不靠 all，也不靠 JS 手动补帧。把哪些属性动、怎么动、何时动全交给 CSS 规则，反而最稳。
