动画必须表现良好，否则会对用户体验产生负面影响。
在设置动画效果时保持 60fps，因为任何卡顿或停顿都会引起用户注意，并对其体验产生负面影响。
- 注意您的动画不会导致性能问题；确保您了解为给定 CSS 属性设置动画的影响。
- 改变页面（布局）几何图形或导致绘图的动画属性特别消耗资源。
- 尽可能坚持改变变形和透明度。
- 使用
will-change确保浏览器知道您打算为哪些内容添加动画效果。
为属性添加动画效果不是免费的，并且为某些属性添加动画开销要低于其他属性。例如，为元素的 width 和 height 添加动画效果会改变其几何图形，并且可能会导致页面上的其他元素移动或改变大小。此过程称为“布局”（在基于 Gecko 的浏览器（例如 Firefox）中称为“自动重排”），当页面包含大量元素时，费用可能十分高昂。每当触发布局时，通常需要绘制页面或页面的一部分，这通常比布局操作本身的开销更大。
应尽可能避免为触发布局或绘制的属性添加动画效果。对于大多数现代浏览器，这意味着将动画限制为 opacity 或 transform，这两种浏览器都可以高度优化；动画是由 JavaScript 还是 CSS 处理并不重要。
阅读有关如何制作高性能动画的完整指南。
使用 will-change 属性
使用 will-change 可确保浏览器知道您打算更改元素的属性。这样，浏览器在您做出更改之前，就可以进行最合适的优化。不过，不要过度使用 will-change，因为过度使用可能会导致浏览器浪费资源，进而导致更多性能问题。
一般经验法则是，如果动画可能在接下来的 200 毫秒内触发（无论是由用户互动触发，还是由于应用状态触发），不妨对动画元素使用 will-change。在大多数情况下，对于应用当前视图中您打算为其添加动画效果的任何元素，都应针对您打算更改的属性启用 will-change。对于我们在之前的指南中一直使用的框示例，针对转换和不透明度添加 will-change 如下所示：
.box {
will-change: transform, opacity;
}
现在，支持此属性的浏览器（目前大多数最新的浏览器）将在后台进行适当的优化，以支持这些属性的更改或动画设置。
CSS 对比 JavaScript 的性能
网络上有许多网页和评论会话从性能的角度讨论了 CSS 和 JavaScript 动画的相对优势。以下是几点注意事项：
基于 CSS 的动画和原生支持的 Web Animation 通常在称为“合成器线程”的线程上处理。这与执行样式、布局、绘制和 JavaScript 的浏览器“主线程”不同。这意味着，如果浏览器在主线程上运行一些开销大的任务，这些动画可以继续运行而不会中断。
在许多情况下，变形和不透明度的其他更改也可由合成器线程处理。
如果任何动画触发绘制和/或布局，“主线程”将必须执行工作。这适用于基于 CSS 和 JavaScript 的动画，布局或绘制的开销可能会使与 CSS 或 JavaScript 执行相关的工作量大打折扣，使问题变得无意义。