你真的会用 CSS 动画吗？

2026-02-23 · 阅读时间: 1 分钟前端开发

CSSAnimation性能优化

从 transition 到 keyframes，掌握高性能 Web 动画的最佳实践。

性能警告

不是所有的 CSS 属性都适合拿来做动画。修改 width, height, top, left 会触发浏览器的重排(Reflow)，消耗大量性能。

尽量只对 transform (translate, scale, rotate) 和 opacity 进行动画处理。这两个属性的改变只触发复合(Composite)阶段，可以由 GPU 加速，保证 60fps 的流畅体验。

.box {
  transition: transform 0.3s ease;
}
.box:hover {
  transform: translateY(-5px);
}