如何使用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

表示作者希望在不久的将来以动画形式或更改元素上给定名称的属性。如果给定的属性是速记，则表示速记扩展到的所有longhands的期望值。

由于animation本身是一个扩展到各种动画相关属性的速记属性，我希望will-change更好的用法是在即将到来的规则中明确声明哪些属性将被动画处理，以允许渲染引擎尽可能有针对性地执行它正在做的工作。

Answer 2

这里有几件事正在发生。

首先，您只需要在动画之前使用will-change，并在动画之后取消设置它：https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas。这最好在javascript中完成。在样式规则中保留更改将导致浏览器永远在新的层上呈现该元素(增加浏览器在页面上保留的内存量)。

另外，尝试使用transform: translateY()而不是top来设置动画效果。更便宜：https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

下面是一个快速演示，向您展示如何实现这一点：

https://codepen.io/newshorts/pen/RLPvZE?editors=1100

.box {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  margin: 50px;
  animation-name: fadeUpIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpIn {
  from { 
    will-change: transform, opacity;
    transform: translateY(0%) translateZ(0);
    opacity: 0;
  }

  to { 
    will-change: unset;
    transform: translateY(-100%);
    opacity: 1; 
  }
}