此页面由 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 DevTools 和 Firefox DevTools 提供了许多工具，可帮助您找出动画运行缓慢或出现故障的原因。

检查动画是否触发布局

如果动画使用 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 示例中进行测试，并使用 DevTools 探索性能。