关于几天来研究使用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，

　　滑动流畅度会有非常明显的提高。