CSS3高效能動畫

css動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite

paint通常是其中最花費效能的，盡可能避免使用觸發paint的css動畫屬性，在css動畫中使用webkit-transform: translatex(3em)的方案代替使用left: 3em，因為left會額外觸發layout與paint，而webkit-transform只觸發整個頁面composite；

div

/*css3動畫 @keyframes 規則

*//*

制定規則為move的動畫

*/@-webkit-keyframes moveto }

/*這裡的@keyframes規則中left會額外觸發layout和paint 應該優化為transform形式 transform只會觸發composite

*/@-webkit-keyframes moveto }

/*相應相容性修改-webkit字首即可

view code

參考:*********ie10以下不支援animation-direction，修改**中的錯誤注釋********

高效能 CSS3 動畫

關於流暢度，主要體現在前端動畫中，在現有的前端動畫體系中，通常有兩種模式 js動畫與css3動畫。js動畫是通過js動態改寫樣式實現動畫能力的一種方案，在pc端相容低端瀏覽器中不失為一種推薦方案。而在移動端，我們選擇效能更優瀏覽器原生實現方案 css3動畫。然而，css3動畫在移動多終端裝置場景下，...

CSS3高效能動畫

高效能 CSS3 動畫

高效能 CSS3 動畫

高效能 CSS3 動畫

相關推薦