WEB 移動端 CSS3動畫效能 最佳化

標籤：就會   for   提高   body   屬性   log   translate   round   web   

很多時候，我們在開發移動端的時候要使自己的網頁相容不同的機型，很多時候會採用CSS3動畫，但是很多時候在安卓機下，動畫明顯會出現卡頓，很難看，那麼這裡我介紹幾個CSS 屬性進行硬體加速那麼就會得到明顯的效果：

opacity: 1;

-webkit-backface-visibility: hidden;

-webkit-transform:translate3d(0,0,0);

這三個屬性選其中一個放在要使用動畫的元素中即可，很多時候你使用了-webkit-transform: 這個屬性做了其它值，那麼你就不能用這個了，選其它兩個吧。

還有一些最佳化方面的就是少用 高消耗的屬性 css shadow、background-attachment: fixed 等這些屬性，並且如果使用了left top 定位，那麼最好使用 -webkit-transform:translateX ,-webkit-transform:translateY 代替，提高動畫流暢性...

WEB 移動端 CSS3動畫效能 最佳化