css - 向 css will-change 添加几个属性

Question

我在我的CSS中使用will-change:transform来加速元素动画，我想知道是否有一种方法可以添加多个属性，即具有变换和不透明度。

Answer 1

根据MDN和 W3C可以使用逗号:

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

您可能已经意识到这一点，但为了完整起见:

Don’t Spam will-change Across Too Many Properties or Elements

A common initial response to seeing will-change is to assume that code like this is a good idea:

* { will-change: transform, opacity /* , ... */; }

After all, this tells the browser to go ahead and optimize everything, which has to be good right?

Wrong. The browser already tries as hard as it can to optimize everything. Telling it to do so explicitly doesn’t help anything, and in fact has the capacity to do a lot of harm; some of the stronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or even crash. [W3C]