CSS3中对Animations和Transitions的比较

http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

CSS3中的Animations和Transitions有些类似，但有点区别，举例如下：

Similarities

From a distance, both animations and transitions are very similar. They both allow you to:

• Specify which CSS properties to listen for changes on
• 设置一个CSS property作为修改对象
   
• Set timing (easing) functions to alter the rate of going from a one property value to another
• 设置时间函数来改变property的变化
   
• Specify a duration to control how long the animation or transition will take
• 设置总的延时
   
• Programmatically listen to animation and transition-specific events that you can then do with as you wish
• 设置监听
   
• Visualize CSS property changes.
• 可以直观的看到变化

Differences

Animations and transitions show their differences when it comes to how you trigger them to play, how complicated of a transition you can define, and how formal you must be in being able to use them. Let's explore those topics in greater detail.

Triggering

One of the major differences between animations and transitions can be seen in how you trigger them to start playing.

transition通常只能通过例如：hover的伪类来激活，或者动态加减class

animation则不需要任何东西就可以执行

Defining Intermediate Points / Keyframes

animation可以设置中间值，但是transition只能是开始和结尾值

Specifying Properties Up-Front

transtion必须对要改变的CSS property都设置上transtion:xxx，animation则比较松，之前的keyframe没有定义也没关系

Conclusion

如果你要做复杂的动画，使用animation，如果你只做简单的动画，使用transition