天天看點

前端動畫效果實作的三種方式

第一種,js中setTimeout和setintervel,把動畫元素設定position:absalute,然後操作left、top來移動。此種方法記憶體消耗大,顯示效果差,不推薦。

第二種,CSS3中的animation動畫,添加動畫@keyframs name {0% {‘left’,‘0px’} 50% {‘left’,‘100px’}}。此種方法可以實作的效果多,旋轉移動,可以實作精細化動畫,推薦使用。

第三種,CSS3中的transition過渡,設定過渡時間,通過js添加CSS屬性transform,可以實作動畫效果,推薦使用。

#ul {transition: 40s linear;}

$("#ul").css({\'transform\':\'translate(-3190px)\'})