此页面由 Cloud Translation API 翻译。

如何创建高性能 CSS 动画

Kayce Basques

Rachel Andrew

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

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

浏览器兼容性

本指南建议的所有 CSS 属性都具备良好的跨浏览器性能联系。

transform

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

opacity

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

will-change

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

移动元素

要移动元素，请使用 translate 或 rotation 关键字值（位于 transform 属性。

例如，如需将某项内容滑入视图，请使用 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);
  }
}

调整元素大小

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

.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;
}

不过，此规范建议您只对那些更改。例如，用户能够滑入的边栏可能就是正确的。对于不经常变化的元素，我们建议将 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));
  }
}