常用动画实现技术比较--animate/animation/transition

在工作中，经常需要用不同的技术实现动画。于是，想总结一下这三种实现方式的异同，以便以后面对不同的动画需求，可以快速选择出适合的动画技术。因为是菜鸟，如果有总结不对或不到位的地方，请大神不吝赐教。
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设置位移。

10 transition只对原本写了的属性产生效果