如何创建高性能 CSS 动画

Kayce Basques

Rachel Andrew Technical Writer

本指南将介绍如何创建高性能 CSS 动画。

请参阅为什么有些动画运行缓慢？，了解这些建议背后的理论。

浏览器兼容性

本指南推荐的所有 CSS 属性都具有良好的跨浏览器支持。

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

移动元素

如需移动元素，请使用 transform 属性的 translate 或 rotation 关键字值。

例如，如需将某个项滑入视图，请使用 translate。

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

使用 rotate 旋转元素。以下示例将元素旋转 360 度。

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

调整元素大小

如需调整元素大小，请使用 transform 属性的 scale 关键字值。

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

更改元素的可见性

如需显示或隐藏元素，请使用 opacity。

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

注意：您可以在 Animista 上找到各种动画的复制和粘贴示例。

避免使用会触发布局或绘制的属性

在使用任何 CSS 属性（transform 和 opacity 除外）进行动画处理之前，请确定该属性对渲染流水线的影响。除非绝对必要，否则请避免使用任何会触发布局或绘制的属性。

警告：如果您必须使用会触发布局或绘制的属性，则可能无法保持动画流畅或高性能。

强制创建图层

如为什么有些动画很慢？中所述，将元素放置在新层上可让浏览器重新绘制这些元素，而无需重新绘制布局的其余部分。

浏览器通常可以很好地决定哪些项应放置在新层上，但您可以使用 will-change 属性手动强制创建层。顾名思义，此属性会告知浏览器，此元素将以某种方式发生变化。

注意：由于创建图层可能会导致其他性能问题，因此我们不建议在优化过程的早期使用它。相反，只有在您发现图形问题并认为将元素提升到新层可能会有所帮助时，才应使用它。

在 CSS 中，您可以将 will-change 应用于任何选择器：

body > .sidebar {
  will-change: transform;
}

不过，规范建议您只应将此属性添加到始终即将发生变化的元素中。例如，这可用于用户可以滑入和滑出的边栏。如果元素不经常更改，请在可能发生更改时使用 JavaScript 应用 will-change。请务必给浏览器留出足够的时间来执行必要的优化，并在更改停止后移除该属性。

如需在不支持 will-change 的浏览器中强制创建图层，您可以设置 transform: translateZ(0)。

调试缓慢或不流畅的动画

Chrome 开发者工具和 Firefox 开发者工具可以帮助您找出动画运行缓慢或出现故障的原因。

检查动画是否会触发布局

使用 transform 以外的其他属性移动元素的动画可能会很慢。以下示例将使用 transform 的动画与使用 top 和 left 的动画进行了比较。

错误做法

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

正确做法

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

您可以在以下两个示例中测试此功能，并使用开发者工具探索性能。

• 之前，使用 top 和 left 动画。
• 之后，使用 transform。

Chrome DevTools

1. 打开性能面板。
2. 在动画播放期间记录运行时性能。
3. 检查摘要标签页。

如果您在摘要标签页中看到渲染的值不为零，则可能意味着您的动画正在让浏览器执行布局工作。

animation-with-top-left 示例会导致渲染工作。

使用 transform 的动画示例不会导致渲染工作。

Firefox 开发者工具

在 Firefox 开发者工具中，瀑布图可帮助您了解浏览器在哪些方面花费了时间。

1. 打开性能面板。
2. 在动画播放期间开始记录性能。
3. 停止录制并检查 Waterfall 标签页。

如果您看到 Recalculate Style 条目，则意味着浏览器必须返回到渲染瀑布的开头才能渲染动画。

检查是否存在丢帧

1. 在 Chrome 开发者工具中打开渲染标签页。
2. 选中 FPS 计数器复选框。
3. 在动画运行期间观察这些值。

请注意 FPS 测量仪界面顶部的帧标签。 此字段会显示 50% 1 (938 m) dropped of 1878 等值。高性能动画具有较高的百分比（例如 99%），这意味着几乎没有丢帧，动画看起来很流畅。

“animation-with-top-left”示例会导致 50% 的帧被丢弃。

使用 transform 的动画示例仅导致 1% 的帧被丢弃。

检查动画是否会触发绘制

对浏览器而言，某些属性的绘制成本高于其他属性。例如，任何涉及模糊效果（例如阴影）的内容都需要比绘制红框更长的绘制时间。这些差异在 CSS 中并不总是很明显，但浏览器开发者工具可以帮助您确定哪些区域需要重新绘制，以及其他与绘制相关的性能问题。

Chrome DevTools

1. 在 Chrome 开发者工具中打开渲染标签页。
2. 选择绘制闪烁。
3. 在屏幕上移动指针。

在 Google 地图的这个示例中，您可以看到正在重绘的元素。

如果您看到整个屏幕闪烁，或者您认为不应更改的区域突出显示，请进一步调查。

如果您需要确定某个特定属性是否会导致与绘制相关的性能问题，Chrome 开发者工具中的绘制性能分析器可以提供帮助。

Firefox 开发者工具

1. 打开设置，然后为切换绘制闪烁添加一个 Toolbox 按钮。
2. 在要检查的页面上，开启该按钮，然后移动鼠标或滚动页面，即可查看突出显示的区域。

在合成阶段添加动画

尽可能将动画限制为 opacity 和 transform，以便在渲染路径的合成阶段保留动画。使用开发者工具检查路径的哪个阶段受到动画的影响。

使用绘制性能分析器查看是否有任何绘制操作特别耗费资源。如果您发现任何问题，请检查是否有其他 CSS 属性可以提供相同的外观和风格，同时提供更好的性能。

请谨慎使用 will-change 属性，并且仅在遇到性能问题时使用。