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

Posted 2020-10-03 dontes

第一种，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)‘})