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

标签：translate   for   css3   旋转   tin   key   操作   settime   line   

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

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

标签：translate   for   css3   旋转   tin   key   操作   settime   line   

原文地址：http://www.cnblogs.com/dontes/p/7405890.html