应显式声明需过渡的属性而非使用all，如transition: background-color 0.2s, transform 0.2s, opacity 0.15s；优先选用可硬件加速的transform和opacity，避免触发布局或重绘的属性。
transition属性写法不对，多个CSS属性过渡就失效
直接写 transition: all 0.3s 看似省事，但实际会拖慢渲染、触发不必要的重绘，还容易掩盖某个属性没生效的问题。真正可控的做法是显式列出要过渡的属性。
- 用逗号分隔多个过渡声明，比如
transition: background-color 0.2s, transform 0.2s, opacity 0.15s - 避免用
all，它会让所有可动画属性（包括box-shadow、filter甚至z-index）都尝试过渡，而有些根本不会动，纯属浪费 - 如果属性名拼错（比如写成
backgound-color），浏览器静默忽略，不会报错，过渡就“消失”了
transform和opacity能硬件加速，其他属性慎用过渡
不是所有CSS属性过渡都便宜。浏览器对 transform 和 opacity 有专门的合成层优化，帧率稳；但改 width、height、left、top 这类会触发布局（Layout）或绘制（Paint）的属性，一动就卡。
- 优先用
transform: translateX()代替left，用transform: scale()代替width/height -
color、background-color虽然能过渡，但每次变化都要重绘整块区域，小元素还好，大容器+频繁触发就明显掉帧 - 过渡
box-shadow或filter（如blur()）开销极大，尤其在低端设备上，建议只在 hover 等低频场景用
transition-property值必须和实际变更的属性完全匹配
很多人以为写了 transition: color 0.3s，只要元素 color 变了就会动，其实还得看变更是怎么触发的——CSS类切换、JS赋值、伪类激活，都得对得上。
- JS里用
el.style.color = 'red'，没问题；但用el.classList.add('active')，就得确保.active里真写了color，且没有被更高级的选择器覆盖 - 伪类如
:hover触发时，若父元素用了will-change: transform，可能干扰子元素过渡时机，出现跳变 - 用 CSS 自定义属性（
--my-color）做主题切换？transition不支持监听变量变化，必须靠 JS 手动加 class 或设内联样式
transition-delay和cubic-bezier容易被忽略的细节
多个属性过渡不同步，常是因为没统一 transition-delay 或缓动函数不一致，看着像“卡顿”，其实是节奏没对齐。
立即学习“前端免费学习笔记（深入）”；
- 如果想让
transform先动、opacity稍后跟上，可以写transition: transform 0.2s, opacity 0.2s 0.1s（第二个时间是 delay） - 默认的
ease是先慢后快再慢，适合入口动画；但两个属性都用linear会更同步，视觉上更“整体” - 别手写
cubic-bezier(.42,0,.58,1)这种值来“炫技”，除非你真调过效果。多数时候ease-in-out或ease-out更可靠
真正麻烦的是嵌套过渡：父元素有 transition，子元素也加了，又用了 transform，这时候合成层怎么建、是否隔离、是否会意外提升图层——这些没法靠一行 transition 解决，得看 DevTools 的 Layers 面板。
