一般来说，增加动画可以使用：animation ,想要过渡的话使用transition.
transition: 参考 http://www.w3school.com.cn/cssref/pr_transition.asp
animation:参考 http://www.w3school.com.cn/cssref/pr_animation.asp
W3school资料还是很好的。
transition-timing-function。和transition动画一样，animation动画也是CSS3动画的一种，这类动画可以理解为是一种关键帧动画，它可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，通过使用animation动画我们可以得到更为复杂的动画效果。
注意：transition是为页面元素设置某个需要产生动画效果的属性，如宽度（width）、高度（height）、透明度（opacity），甚至3D旋转等，并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。
通俗地说，transition是简化版的CSS3动画，而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些，我们往往只有在遇到transition无法解决的问题时，才会转而使用animation。
div.trans { width:100pxheight:100pxbackground:graytransition:width 2s-moz-transition:width 2s/* Firefox 4 */ -webkit-transition:width 2s/* Safari and Chrome */ -o-transition:width 2s/* Opera */ } div.trans:hover { width:300px} div.ani { width:100pxheight:100pxbackground:redposition:relativeanimation:mymove 5s infinite-moz-animation:mymove 5s infinite/*Firefox*/ -webkit-animation:mymove 5s infinite/*Safari and Chrome*/ } @keyframes mymove { from {left:0px} to {left:200px} } @-moz-keyframes mymove /*Firefox*/ { from {left:0px} to {left:200px} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px} to {left:200px} }刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准，一些成员认为过渡效果和动画并非样式属性，而且已经可以用脚本实现。语法：transition: property duration timing-function delay说明：ValueDescriptiontransition-property指定要改变CSS属性的名称transition-duration指定过渡效果要花多少时间(s/ms)transition-timing-function指定过渡效果的速度transition-delay定义过渡效果的延迟时间.实例：<style type="text/css">div { width:100pxheight:100pxbackground:redtransition:width 2s-moz-transition:width 2s/* Firefox 4 */ -webkit-transition:width 2s/* Safari and Chrome */ -o-transition:width 2s/* Opera */ } div:hover { width:300px} </style><div></div>2. AnimationCSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。下面看下一个简单的实例：<style type="text/css">div { width:100pxheight:100pxbackground:redposition:relativeanimation:mymove 5s infinite-moz-animation:mymove 5s infinite/*Firefox*/ -webkit-animation:mymove 5s infinite/*Safari and Chrome*/ } @keyframes mymove { from {left:0px} to {left:200px} } @-moz-keyframes mymove /*Firefox*/ { from {left:0px} to {left:200px} }@-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px} to {left:200px} } </style><div></div>语法：animation: name duration timing-function delay iteration-count direction说明：ValueDescriptionanimation-name指定动画帧的名称animation-duration指定动画运行的时间:秒(s)和毫秒(ms)animation-timing-function指定动画运行的速度animation-delay指定动画的延迟时间animation-iteration-count指定动画的重复数animation-direction指定动画是否以相反的方向运行动画
