css动画使用margin和transform的区别，性能优化

1.margin是属于布局属性，该属性的变化会导致页面的重排。 对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到GPU中进行渲染

2.transform是合成属性，浏览器会为元素创建一个独立的复合层，当元素内容没有发生变化，该层不会被重绘，通过重新复合来创建动画帧

//验证一下

<div class="box move">

</div>
<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }
        .move{
            animation: mymove 3s ease-in-out;
        }
        @keyframes mymove {
            0%{
                margin-left: 30px;
            }
            50%{
                margin-left: 60px;
            }
            100%{
                margin-left: 90px;
            }
        }
        .move2{
            animation: mymove2 3s ease-in-out;
        }
        @keyframes mymove2{
            0%{
                transform: translateY(30px);
            }
            50%{
                transform: translateY(60px);
            }
            100%{
                transform: translateY(90px);
            }
        }
 </style>

当使用margin改变位置的动画：


使用transform改变位置的动画：




之前通过transform:translete3d(0,0,0)  3d变形才有这种独立复合层，2d没有；或者通过translateZ（）来骗取硬件加速

硬件加速：  使用GPU替代CPU做一些高负荷的工作，加速浏览器渲染

will-change属性的出现，他可以提前告诉浏览器我们要对浏览器做什么动画  transform/opacity
使得浏览器提前知道，对此特殊照顾一番，让动画渲染更加流畅，但是滥用会占用GPU资源，导致页面奔溃，浏览器兼容性也不好
will-change   【 https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change 】

//验证

.box{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            will-change:transform   //加上will-change
  }