【译】利用好 will-change，轻松让网页动画实现 60fps 丝滑流畅感

前端

2024-01-15 16:03:33

使用 CSS 属性 will-change 优化 CSS 动画的性能

CSS 动画的性能优化

在网页设计中，CSS 动画是创造动态交互体验的有力工具。然而，随着动画数量和复杂度的增加，性能问题可能会成为一个障碍。要确保流畅的动画体验，了解影响性能的因素至关重要：

动画数量： 过多动画会给浏览器带来沉重负担，导致卡顿。
动画复杂性： 复杂的动画需要浏览器进行更大量的计算，从而降低性能。
浏览器支持： 不同浏览器对 CSS 动画的支持程度不同，这会影响性能。

为了优化性能，我们可以采取以下措施：

减少动画数量： 仅在必要时使用动画，避免过度动画。
简化动画： 使用简单的动画效果，避免复杂的动画。
使用硬件加速： 通过使用 will-change 属性，可以利用显卡处理动画，从而提升性能。

使用 will-change 属性优化动画

will-change 属性告知浏览器哪些属性将在动画中发生变化，以便浏览器提前做好准备，提升动画流畅度。

使用 will-change 时，需要指定要变化的属性。常见属性包括：

transform
opacity
background-color

例如，以下代码告知浏览器 transform 和 opacity 属性将在动画中发生变化：

div {
  will-change: transform, opacity;
}

实例演示

为了展示 will-change 如何优化动画，我们创建一个带有旋转动画的 div 元素：

HTML：

<div id="box"></div>

CSS：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

注意： 没有 will-change 属性，动画可能不流畅。

现在，我们使用 will-change 优化动画：

#box {
  will-change: transform;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}