前端动画效果实现的三种方式

第一种,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)'})

posted @ 2017-08-21 17:59  dontes  阅读(1816)  评论(0编辑  收藏  举报