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
}