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

表示作者希望在不久的将来在元素上使用给定名称设置动画或更改该属性。如果给出的属性是速记，则表示对速记扩展到的所有长传的期望。

由于animation本身是一个扩展到各种动画相关属性的速记属性，我希望更好地使用will-change来明确说明哪些属性将在即将推出的规则中设置动画，允许渲染引擎尽可能地针对其正在进行的工作进行定位。

Answer 2

这里有几件事情要发生。

首先，你需要在动画之前只使用from First import x,b class addition(): def process(self): c = x + b return c，然后在https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas之后取消设置。这最好在javascript中完成。在样式规则中保留更改将导致浏览器永久地在新图层上呈现该元素（增加浏览器在页面上保留的内存量）。

另外，尝试使用will-change代替transform: translateY()制作动画。它更便宜：https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

这是一个快速演示，向您展示如何处理这个问题：

top