css需要硬件加速的部分
在很多需要css动画的位置，在遇到透明层渐变的情况下，基本需要启用GPU加速，不然在cpu中处理这些事情，由于负担过重问题，会导致用户体验不佳，特别是在移动设备上，
opacity等这些是可以激活GPU加速，但是依旧体验不佳，此时可能就需要使用will-change这个属性，则是提醒浏览器要对什么元素做什么动画，这样就可以有个提前量的优化设置，减少出现的卡顿。虽然大佬们早期给出的解决方案是使用translateZ()或者translate3d()hack来骗取浏览器触发硬件加速，其实就是给元素添加没有变化的3d变形，但是这样强制的使用的代价就是，他们占用了过多的内存和GPU的使用，那么如果能够提前预知元素的动画行为并为其提前准备好需要使用的资源的话，那效果就不一样了，所以will-change就是这么用的了。
如何去正确的使用它
该属性可以提前通知浏览器我们要对什么元素做什么动画效果，让浏览器进行提前资源调用，使用非常简单，只需要添加一个
will-change: transform;就好了，但是可不能全部元素都添加这些东西，这个道理和之前使用的hack是一摸一样的，如果直接使用will-change: all;，这样带来的后果会因为过度资源占用而页面崩溃，所以尽量不要在所有的css中使用，只是在一些必要的动画效果中使用就好了。而且这个也不是万金油，使用它的时候需要在发生形变前给出这个属性，毕竟在形变过程中去使用就完全没有意义了，而且可能还会起反作用。
will-change属性的值
- auto 表示没有明确的意图; 无论是启发式和最优化，用户代理应该应用都和正常情况相同
- scroll-position 表示开发者期望去在接下来去改变或者有动画应用元素的滚动位置
- contents 表示开发者期望去在接下来去改变或者有动画应用元素的内容
- 用来排除关键字 will-change, none, all, auto, scroll-position, and contents, 从之外增加一些通用的关键字
will-change： transform;
will-change： opacity;
will-change： top, left, bottom, right;
如果一个属性无最初的值,在这个元素上这个属性将创建一个堆栈的内容, 明确规定在will-change的属性必须在这个元素上创建一个堆栈的内容.如果一个属性无最初的值, 这个属性将造成这个元素产生一个包含区块的固定定位的元素, 明确规定在 will-change的属性必须造成这个元素产生一个包含区块的固定定位的元素
