CSS动画原理与硬件加速

CSS动画性能取决于渲染管线路径，合理利用硬件加速可跳过昂贵的Layout和Paint阶段。

CSS动画渲染路径

三种渲染路径

动画属性分类

GPU硬件加速原理

什么是硬件加速

浏览器将某些元素提升为独立的合成层，交由GPU处理。

CPU处理：Layout + Paint + Composite
GPU处理：仅Composite（纹理变换）

合成层工作原理

┌─────────────────────────────────────┐
│             CPU主线程               │
│   JavaScript → Style → Layout → Paint│
└─────────────────┬───────────────────┘
                  │ 提交纹理数据
                  ▼
┌─────────────────────────────────────┐
│           GPU合成线程               │
│    纹理上传 → 变换 → 合成 → 输出    │
└─────────────────────────────────────┘

GPU合成只处理：

• 纹理位置变换
• 纹理透明度混合
• 纹理缩放旋转

触发硬件加速的条件

/* 3D变换 */
.accelerated {
  transform: translateZ(0);
  transform: translate3d(0, 0, 0);
}

/* will-change提示 */
.accelerated {
  will-change: transform, opacity;
}

/* animation/transition中使用transform/opacity */
.accelerated {
  animation: slide 1s;
}

@keyframes slide {
  to { transform: translateX(100px); }
}

高性能动画属性

transform变换

/* 移动 */
.move {
  transform: translate(100px, 50px);
  transform: translateX(100px);
  transform: translateY(50px);
  transform: translate3d(100px, 50px, 0);
}

/* 缩放 */
.scale {
  transform: scale(1.5);
  transform: scale(1.5, 2);
  transform: scale3d(1.5, 2, 1);
}

/* 旋转 */
.rotate {
  transform: rotate(45deg);
  transform: rotate3d(1, 1, 0, 45deg);
}

/* 组合变换 */
.complex {
  transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

transform变换在GPU层面执行，不触发Layout和Paint。

opacity透明度

.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* 悬停效果 */
.hover-effect {
  transition: opacity 0.2s;
}

.hover-effect:hover {
  opacity: 0.8;
}

opacity变化同样在合成层处理，性能优异。

避免低性能属性

不要用left/top做动画

/* 错误：触发回流 */
.bad {
  position: absolute;
  animation: move 1s;
}

@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}

/* 正确：使用transform */
.good {
  animation: slide 1s;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

不要用width/height做动画

/* 错误：触发回流 */
.bad {
  animation: grow 1s;
}

@keyframes grow {
  from { width: 100px; }
  to { width: 200px; }
}

/* 正确：使用scale */
.good {
  animation: scaleUp 1s;
}

@keyframes scaleUp {
  from { transform: scaleX(1); }
  to { transform: scaleX(2); }
}

不要用margin/padding做动画

/* 错误：触发回流 */
.bad {
  animation: expand 0.5s;
}

@keyframes expand {
  from { margin-left: 0; }
  to { margin-left: 50px; }
}

/* 正确：使用transform */
.good {
  animation: slideIn 0.5s;
}

@keyframes slideIn {
  from { transform: translateX(0); }
  to { transform: translateX(50px); }
}

will-change使用

正确使用时机

/* 动画开始前声明 */
.modal {
  will-change: transform, opacity;
}

.modal.hidden {
  will-change: auto;  /* 动画后移除 */
}

JS动态控制

// 鼠标进入时启用
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});

// 动画结束后移除
element.addEventListener('transitionend', () => {
  element.style.willChange = 'auto';
});

避免滥用

/* 错误：全局声明 */
* {
  will-change: transform;  /* 严重浪费GPU内存 */
}

/* 正确：精确使用 */
.specific-element {
  will-change: transform;
}

硬件加速层管理

层爆炸问题

/* 危险：可能导致过多合成层 */
.container {
  transform: translateZ(0);
}

.container .item {
  /* z-index可能导致隐式提升 */
  z-index: 1;
}

避免隐式合成

/* 减少层叠上下文嵌套 */
.parent {
  transform: translateZ(0);
}

/* 子元素不要设置z-index */
.child {
  /* 避免z-index */
}

性能对比

要点总结

1. transform/opacity只触发Composite，性能最优
2. 避免用几何属性做动画，触发回流重绘
3. will-change提前提示GPU准备，但要精确使用
4. 3D变换隐式触发硬件加速
5. 监控合成层数量，避免层爆炸