使用 transform: scale() 实现缩放动画更流畅，因它不触发重排重绘，可启用硬件加速；配合 transition、will-change 和 transform-origin 能进一步提升性能，避免布局抖动和频繁操作，确保动画平滑。
CSS元素缩放动画卡顿，通常是因为浏览器在动画过程中频繁重排或重绘，导致性能问题。使用 transition 搭配 transform: scale() 是实现平滑缩放的关键方法，因为它能触发硬件加速，减少对主线程的依赖。
为什么 transform: scale() 更流畅？
transform 属性作用于图层的视觉表现，不会影响文档流，因此不会触发重排（reflow）或重绘（repaint）。浏览器可以将该操作交给 GPU 处理，实现硬件加速。而直接修改 width、height、margin 等属性会引发布局变化，造成卡顿。
建议始终优先使用 transform: scale() 而非改变尺寸属性来实现缩放动画。正确使用 transition + transform
确保 transition 应用在 transform 上，而不是其他可能引起重排的属性。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.element {
transition: transform 0.3s ease;
}
.element:hover {
transform: scale(1.2);
}
这样鼠标悬停时，元素会平滑放大 1.2 倍，无卡顿。
提升动画性能的额外技巧
-
开启硬件加速：可添加
will-change: transform提示浏览器提前优化：
.element { will-change: transform; }
will-change 不要滥用，仅用于真正需要动画的元素，否则会占用过多内存。.element { transform-origin: center center; }
检查是否存在布局抖动
如果仍卡顿，检查是否无意中触发了重排。例如：
- 动画期间是否动态修改了 DOM 结构？
- 是否读取了 offsetWidth、getBoundingClientRect 等布局属性？
- 父容器是否有动画但未设置 transform-style 或 backface-visibility？
可通过 Chrome DevTools 的 Performance 面板录制动画过程，查看是否有大量 Layout 或 Paint 记录。
基本上就这些。合理使用 transform 和 transition，避免干扰布局，缩放动画就能保持流畅。
