CSS过渡性能瓶颈在于重排重绘，width/height/top/left等布局属性易触发；应优先使用transform和opacity等GPU加速属性，并避免强制同步布局。
CSS 过渡本身性能开销很小，真正影响性能的是过渡过程中触发的 重排（reflow）和重绘（repaint），尤其是当过渡涉及会触发布局计算的属性时。
哪些属性过渡容易引发重排？
以下属性在变化时会改变元素几何信息或文档流，浏览器必须重新计算布局：
- width / height / top / left / bottom / right（依赖于定位上下文）
- margin / padding / border
- display / position / float / clear
- font-size / line-height（可能影响行高和文字流）
对这些属性做 transition，尤其在动画频繁执行（如 hover、scroll 触发）时，极易造成卡顿。
推荐用硬件加速的“安全”过渡属性
只修改不触发重排/重绘的属性，浏览器可交由 GPU 处理，帧率更稳定：
立即学习“前端免费学习笔记（深入）”；
- transform: translateX/Y/Z(), scale(), rotate()
- opacity
例如：想实现“滑入效果”，优先用 transform: translateX(-100%) → translateX(0)，而非 left: -100% → left: 0。
如何避免意外触发布局读取？
即使你没改布局属性，JavaScript 中的“强制同步布局”也会让过渡变慢。常见陷阱包括：
- 在设置样式前读取
offsetTop、clientWidth、getComputedStyle()等布局相关属性 - 连续写样式又读样式（如：改 class → 读 offsetHeight → 再改 style）
解决方法：批量读取、延迟写入，或使用 requestAnimationFrame 分离读写操作。
小技巧提升过渡流畅度
除了选对属性，还可以主动优化渲染路径：
- 给过渡元素加
will-change: transform（仅在必要时，避免滥用） - 用
transform: translateZ(0)或backface-visibility: hidden强制开启合成层 - 过渡时间控制在 200–300ms，过长易感知卡顿，过短难察觉动画效果
- 避免在
:hover上同时过渡多个布局属性，拆解为 transform + opacity 组合
不复杂但容易忽略。
