天天看点

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

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