will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高css动画的执行效率。

属性的取值：

1、auto:  实行标准浏览器优化。

2、scroll-position:  表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

3、contents:  表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

4、<custom-ident>:  表示开发者希望在不久后改变指定的属性名或者使之产生动画，比如transform 或 opacity。

使用须知：

1、不要将 will-change 应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。

2、通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是使用完后及时清除。

3、如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题，它不应该被用来预防性能问题。

使用

如果想通知浏览器会发生一个transform方面的变化，可以这样写：

.element {
	will-change: transform;
}

我们还可以指定多个值，用逗号分隔，例如：

.element {
	will-change: transform, opacity;
}

然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它

链接: https://fly63.com/article/detial/3545