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
  }