css動畫使用margin和transform的區別，效能優化
阿新 • • 發佈：2021-06-23
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改變位置的動畫：