CSS 如何实现高性能动画？

Question

CSS 如何实现高性能动画？

仓乃文 · Accepted Answer

实现高性能 CSS 动画的核心原则是只使用 transform 和 opacity，这两个属性由 GPU 合成器处理，不会触发重排（reflow）和重绘（repaint）。

```css
/* 推荐：使用 transform 和 opacity */
.box {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.box:hover {
  transform: translateY(-10px) scale(1.05);
  opacity: 0.8;
}

/* 避免：使用 top/left/width/height 会触发重排 */
.box-bad {
  transition: top 0.3s ease, width 0.3s ease;
}
```

提前告知浏览器即将变化的属性：
```css
.animated-element {
  will-change: transform, opacity;
}
```

补充说明：
- transform 和 opacity 在合成器线程处理，不占用主线程
- 避免动画中使用 width、height、top、left、margin、padding
- will-change 提前创建合成层，但不要滥用（内存开销）
- Chrome DevTools → Rendering → Paint Flashing 可查看重绘区域