使用transform和opacity可提升动画性能，因二者触发GPU加速且不引发重排重绘；应避免left、width等布局属性动画，推荐通过transform实现位移缩放、opacity控制透明度，并结合will-change优化合成层，确保流畅60fps。
在现代网页开发中，实现流畅的动画效果对用户体验至关重要。为了确保动画运行顺滑且不卡顿，合理利用CSS中的 transform 和 opacity 是性能优化的关键手段。这两者之所以高效，是因为它们触发的是GPU加速的合成层操作，而非重排（reflow）或重绘（repaint），从而大幅减少浏览器渲染负担。
为何选择 transform 与 opacity？
浏览器在渲染页面时，会经历多个阶段：样式计算、布局（重排）、绘制（重绘）和合成。其中，layout 和 paint 是开销最大的环节。
而 transform 和 opacity 的特殊之处在于：
- 它们只影响图层的合成（composite），不会触发重排或重绘
- 浏览器可以将使用这两个属性的元素提升为独立的合成层，交由GPU处理
- GPU在处理透明度变化和空间变换时效率极高，动画更流畅
避免使用会触发重排的属性
一些常见的动画属性如 top、left、width、height、margin 等，会改变元素的几何结构，导致每次变化都触发重排和重绘，严重影响性能。
立即学习“前端免费学习笔记（深入）”；
例如，以下写法应避免：
/* 不推荐 */
.element {
left: 100px;
transition: left 0.3s ease;
}
应改用 transform 实现相同视觉效果：
/* 推荐 */
.element {
transform: translateX(100px);
transition: transform 0.3s ease;
}
组合使用 transform 与 opacity 提升动画表现
在实际项目中，常需要同时实现位移、缩放、旋转和淡入淡出效果。通过组合 transform 和 opacity，可以在不牺牲性能的前提下实现丰富动效。
示例：一个元素从右侧滑入并渐显
.slide-in {
opacity: 0;
transform: translateX(50px) scale(0.95);
transition: opacity 0.4s ease, transform 0.4s ease;
}
<p>.slide-in.active {
opacity: 1;
transform: translateX(0) scale(1);
}
这个动画全程由GPU处理，即使在低端设备上也能保持60fps。
辅助技巧：强制启用硬件加速
虽然现代浏览器会自动对 transform 和 opacity 启用GPU加速，但有时可借助 will-change 或 translateZ(0) 显式提示浏览器提前创建合成层。
.element {
will-change: transform, opacity;
/* 或使用 translateZ(0) 创建3D上下文 */
/* transform: translateZ(0); */
}
注意：will-change 不宜滥用，应在动画即将开始前添加，并在结束后移除，以免占用过多内存。
基本上就这些。只要坚持使用 transform 和 opacity 来驱动动画，避免触发布局变化的属性，就能显著提升页面动画的流畅度和响应性。
