2、CSS动画与过渡：transform和opacity的优势，will-change属性的正确使用，触发硬件加速的时机

好，咱们直接进入正题。CSS动画这块，我见过太多人一上来就怼 left、top、width 这些属性。结果呢？页面卡成PPT。今天我就把压箱底的经验掏出来，跟你聊聊到底该怎么写高性能动画。

2.1 为什么偏偏是transform和opacity？

你想想看，浏览器渲染一帧画面，要经过几个阶段：布局（Layout）→ 绘制（Paint）→ 合成（Composite）。如果你改变 left 或 top，浏览器就得重新计算布局，然后重绘，最后合成。这一套下来，CPU和GPU都得忙活半天。

但 transform 和 opacity 不一样。它们直接跳过布局和绘制阶段，只触发合成。说白了，就是让GPU单独干活，CPU可以歇着。我在项目中做过测试，同样一个位移动画，用 transform: translateX() 比用 left 帧率能高出30%以上。

来看个对比代码：

/* ❌ 糟糕的做法 —— 触发重排 */
.box {
  left: 0;
  transition: left 0.3s;
}
.box.active {
  left: 200px;
}

/* ✅ 推荐的做法 —— 仅合成 */
.box {
  transform: translateX(0);
  transition: transform 0.3s;
}
.box.active {
  transform: translateX(200px);
}

嗯，这里要注意：opacity 虽然也是合成属性，但如果你在透明元素上放了很多子元素，浏览器还是得做额外的处理。我建议尽量在独立层上使用 opacity。

2.2 will-change —— 双刃剑，别乱用

很多同学一听说 will-change 能提升性能，就到处加。我曾经接手过一个项目，几乎每个元素都写了 will-change: transform。结果呢？内存占用飙升，页面反而更卡了。

will-change 的作用是提前告诉浏览器：「嘿，这个元素待会儿要变了，你先给它准备一个独立的合成层。」这样动画开始时就不用临时创建层，省去了那一瞬间的卡顿。

但问题在于，每个合成层都要占用GPU内存。你想想看，如果页面上有几十个层，GPU再强也扛不住。

正确的用法是这样的：

/* ✅ 正确用法 —— 动画开始前添加，结束后移除 */
.element {
  /* 不要在这里写 will-change */
}

.element.about-to-animate {
  will-change: transform, opacity;
}

.element.animating {
  /* 执行动画 */
  transform: translateX(100px);
  opacity: 0.5;
  transition: transform 0.3s, opacity 0.3s;
}

我个人习惯用 JavaScript 来控制 will-change 的添加和移除：

// 动画开始前
element.style.willChange = 'transform, opacity';

// 动画结束后（比如 transitionend 事件里）
element.style.willChange = 'auto';

2.3 触发硬件加速的时机

硬件加速，说白了就是把渲染任务交给GPU。GPU擅长并行计算，处理 transform、opacity、filter 这些操作特别快。

但什么时候该触发？什么时候不该？我总结了几个经验：

场景	是否建议触发	原因
持续动画（如旋转、呼吸灯）	✅ 是	GPU持续处理，CPU不阻塞
一次性过渡（如点击展开）	⚠️ 视情况	短动画不值得占用GPU内存
大量元素同时动画	✅ 是	避免CPU过载
页面滚动中的固定元素	❌ 否	浏览器已自动优化，手动加反而浪费

触发硬件加速的常见方式：

/* 方式一：使用 will-change（推荐） */
.element {
  will-change: transform;
}

/* 方式二：使用 3D 变换（hack 方式，不推荐） */
.element {
  transform: translateZ(0);
  /* 或者 */
  transform: translate3d(0, 0, 0);
}

为什么会这样？因为 translateZ(0) 告诉浏览器「这个元素是3D的」，浏览器就会为它单独创建一个层。但如果你不需要3D效果，这就是浪费。我在一个移动端项目中就踩过这个坑，所有元素都加了 translateZ(0)，结果低端机直接闪退。

2.4 实战建议总结

说了这么多，给你整理几条铁律：

• 优先用 transform 和 opacity —— 这是性能最好的组合
• will-change 要动态管理 —— 用完就收，别一直占着GPU
• 别滥用 translateZ(0) —— 除非你确定需要3D变换
• 动画元素尽量独立 —— 用 position: fixed 或 absolute 脱离文档流，减少重排影响
• 用 Chrome DevTools 的 Performance 面板 —— 看看哪些操作触发了 Layout 和 Paint

我记得有一次优化一个轮播图组件，原来用 left 做位移，帧率只有40fps。改成 transform: translateX() 后直接飙到60fps。你想想看，就改了一行代码，效果立竿见影。

下一章我会聊聊 JavaScript 动画的 requestAnimationFrame 和 Web Animations API，到时候再给你分享更多实战经验。