此页面由 Cloud Translation API 翻译。

如何创建高性能 CSS 动画

Kayce Basques

Rachel Andrew

本指南将教您如何创建高性能 CSS 动画。

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

浏览器兼容性

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

transform

浏览器支持

来源

opacity

浏览器支持

来源

will-change

浏览器支持

来源

移动元素

如需移动元素，请使用 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;
  }
}

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

请先确定属性对渲染流水线的影响，然后再对动画使用任何 CSS 属性（transform 和 opacity 除外）。除非绝对必要，否则应避免使用任何会触发布局或绘制的属性。

强制创建图层

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

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

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

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

不过，该规范建议您只对总是会发生变化的元素执行此操作。例如，对于用户可以滑入和滑出的边栏，情况可能就是如此。对于不经常更改的元素，我们建议在可能会发生变化时使用 JavaScript 应用 will-change。请务必给浏览器留出足够的时间来执行必要的优化，并在更改停止后移除该属性。

如果您要在不支持 will-change 的浏览器（很可能是 Internet Explorer）中强制创建图层，可以设置 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));
  }
}

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