performance - 如何使用 will-change 属性和 CSS 动画

Question

使用 will-change property 时要优化基于 CSS 关键帧的动画，您应该将其属性设置为 animation 还是关键帧内更改的属性？

所以，假设这个 CSS:

@keyframes dropDown {
  0%   { opacity: 0; top: -100%; }
  100% { opacity: 1; top: 0; }
}

.element.trigger {
  animation: dropDown 1s;
}

我应该像这样使用 will-change 吗:

.element {
  will-change: animation;
}

或者像这样:

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

Answer 1

简短的回答是，我不确定。 :) 较长的答案是，我希望这将取决于浏览器，至少在短期内是这样，因为浏览器开发人员会仔细研究规范的不同实现并决定如何处理您建议的情况。

但是，我对阅读规范的理解，由 the Opera blog 补充, 是你会像你的第二个例子一样使用单独的属性:

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

具体来说，section on custom-ident :

Indicates that the author expects to animate or change the property with the given name on the element in the near future. If the property given is a shorthand, it indicates the expectation for all the longhands the shorthand expands to.

因为 animation 本身是一个扩展到各种动画相关属性的简写属性，我希望更好地使用 will-change 是明确说明哪个属性将在即将发布的规则中进行动画处理，以允许渲染引擎尽可能有针对性地处理它正在做的工作。