🎨 CSS 动画性能：使用 Will-Change 和 Transform 优化硬件加速

动画流畅度的秘密

流畅的动画是优秀用户体验的关键。在前端动画中，性能最高的动画应该在浏览器的 **复合层（Compositor Layer）** 上运行，从而利用 **GPU 硬件加速**。以下是两个核心优化技巧：

1. **`transform` 和 `opacity`：** 始终使用 `transform`（如 `translate`, `scale`, `rotate`）和 `opacity` 进行动画。这些属性不会触发耗时的 **布局（Reflow）** 或 **绘制（Repaint）** 过程，可以直接在复合层进行。
2. **`will-change` 属性：** 这是一个性能提示。通过 `will-change: transform;` 告诉浏览器，这个元素即将发生变化，让浏览器提前进行优化（如创建独立的复合层）。但应 谨慎使用，只在变化发生前短期设置。

避免使用 `margin`, `padding`, `width`, `height` 等几何属性进行动画，因为它们会强制浏览器进行 Reflow。通过遵循这些原则，可以确保动画在 **60 FPS** 下流畅运行，避免卡顿。