应显式声明transition属性而非all：如transition: background-color 0.2s, border-radius 0.3s, transform 0.35s ease-out；避免混用重排属性（left/top/width/height）与硬件加速属性（transform/opacity）；后声明的transition会覆盖前序同名规则；animation与transition混用易冲突，状态切换优先transition，多帧过程优先animation。
transition同时作用多个CSS属性的写法
直接写 transition: all 0.3s ease 看似省事，但实际会把所有可动画属性（包括box-shadow、opacity、transform甚至z-index）都拉进过渡队列，导致意料之外的闪烁或卡顿。
更稳妥的做法是显式列出要过渡的属性：
transition: background-color 0.2s, border-radius 0.3s, transform 0.35s ease-out- 每个属性可配独立时长、缓动函数，互不干扰
- 没列出来的属性（比如
width或height）变更时不会触发过渡
transform和非transform属性混用过渡的坑
浏览器对transform和opacity有硬件加速支持，但对left、top、width、height等会触发重排（reflow），性能差很多。
常见错误是这样写：
立即学习“前端免费学习笔记（深入）”；
transition: left 0.3s, top 0.3s, transform 0.3s;
结果left和top拖慢整个动画。正确做法是：
- 用
transform: translateX()代替left，translateY()代替top - 避免在同一个
transition里混入重排属性和重绘/合成属性 - 如果必须动
width，单独设一个类，用transition: width 0.3s隔离
多个transition规则叠加时的覆盖逻辑
CSS里后声明的transition会覆盖前面同名属性的设置，不是合并。比如：
.btn { transition: color 0.2s; }<br>.btn:hover { transition: background-color 0.3s; }
悬停时color就没了过渡——因为background-color整条规则替换了之前的color规则。
解决方法只有两个：
- 把所有要过渡的属性写在一条
transition里（推荐） - 用
transition-property+transition-duration等拆开写，确保hover里也带上color
animation和transition混用时的冲突点
当一个元素既用了@keyframes动画，又设置了transition，两者可能打架。典型表现是：鼠标移入瞬间跳变，然后才开始动画。
原因在于transition会捕获初始状态到目标状态的“突变”，而@keyframes又在按帧驱动。常见场景：
- 用
animation做循环旋转，又想用transition控制缩放——删掉缩放的transition，改用@keyframes一并定义 - 需要交互触发+循环动画组合时，优先用
animation，靠animation-play-state控制启停，别硬套transition -
transition只适合“状态切换”，animation适合“过程描述”；混用前先问自己：这是两个状态，还是多个关键帧？
复合动画真正难的不是写法，而是判断哪些属性该进transition、哪些该进@keyframes，以及它们在真实DOM生命周期里谁先生效、谁被覆盖。这些细节不测真机、不看DevTools的Rendering面板，很容易漏掉。
