關於幾天來研究使用css3動畫的一點總結

1. 爲避免合成線程頻繁計算致使性能下降，

　　使用transform屬性，儘可能避免使用width / height / padding / left 等。

2. 側邊欄下陰影遮罩層動畫，

　　若是用background:rgba(0,0,0,0) -> background:rgba(0,0,0,.3)，在chrome瀏覽器上側邊欄的translate動畫會不流暢；

　　改成background: #000; opacity: 0 -> opacity:0.3解決。

3.遮罩層漸入漸出效果，transition和display同用致使動畫失效，

　　display沒有動畫效果，加上這個屬性元素即刻便處於有或沒有的狀態，

　　改成visibility，visibility屬性有漸變效果。同時，visibility:0時雖然在頁面上佔有位置，但不會遮擋下層頁面。

4.側邊欄滑入滑出效果，

　　用translate3d代替translateX或transate，

　　同時添加will-change:transform，

　　滑動流暢度會有很是明顯的提升。