CSS 学习手册

利用 GPU（图形处理器）加速动画和变换，可以提高页面流畅度。浏览器会对某些属性（如 transform、opacity）自动启用 GPU 渲染。 **触发 GPU 加速的属性：** - `transform`（包括 translate, scale, rotate） - `opacity` - `filter` - `will-change` **will-change 属性** 用于告知浏览器该元素将要发生变化，以便提前进行优化。 ```css /* 提示浏览器该元素将进行 transform 和 opacity 动画 */ .animated { will-change: transform, opacity; } /* 谨慎使用，不要过度使用，否则会增加内存消耗 */ ``` **最佳实践：** - 使用 `transform: translateZ(0)` 或 `will-change: transform` 强制开启硬件加速 - 避免在动画过程中改变布局属性（如 width, left, top） - 使用 requestAnimationFrame 实现动画（JavaScript 配合） **示例：** ```css .box { transition: transform 0.3s; will-change: transform; } .box:hover { transform: scale(1.1); } ``` 注意：GPU 加速虽好，但过多使用可能导致内存占用过高，应适度。