在工作中,经常需要用不同的技术实现动画。于是,想总结一下这三种实现方式的异同,以便以后面对不同的动画需求,可以快速选择出适合的动画技术。因为是菜鸟,如果有总结不对或不到位的地方,请大神不吝赐教。
animate是jquery中的一个函数,animation和transition是css3的属性。兼容性上来说,jquery会更好。性能上来说,css3会更高。
1 语法
(selector).animate({styles},speed,easing,callback);
transition: property duration timing-function delay;
animation: name duration timing-function delay iteration-count direction;
2 主要应用场景
animate:分步骤的动画(因为animate参数中有一个回调函数)。
transition:执行一次,动画状态停在终点的动画。
animation:自动执行,重复执行多次的动画,类似gif。
3 是否保留在最后一帧的属性值
animation默认不保留(但可以通过forward属性值设置为保留)
在不需要保留最后一帧的属性值的时候:
animate通过手动清空行内css样式,达到不保留属性的效果;
transition通过手动删除样式类,达到不保留属性的效果。
注意:animate实现动画的实质是修改行内css样式。
4 非数字属性值是否可以创建动画
animate不可以。
5 是否可以设置动画次数
animate和transition不可以。(设置定时器也是可以实现)
6 是否可以自动触发
animate和transition不可以。
7 是否可以往返执行动画
animate不可以。transition通过在动画初始的样式中设置,来实现往返都有动画效果。
8 是否可以实现有步骤的动画
都可以。animation和transition可以通过延迟事件实现。
9 位移动画设置思路
animate通过margin设置位移。
animation和transition通过translate设置位移。