CSS3 animation动画：CSS3除了transition属性，还可以使用animation功能实现复杂的动画效果。要创建animation动画，先要了解@keyframes规则。
CSS3 @keyframes关键帧：使用@keyframes创建动画。在动画过程中，可以多次改变CSS的样式，指定变化时用%，或者用关键字"form"和"to",表示0%到100%。
animation语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-
animation-name：规定@keyframes动画的名称；
-
animation-duration：规定完成过渡效果需要多少秒或毫秒；
-
animation-timing-function：规定速度效果的速度曲线；
-
animation-delay：定义过渡效果何何时开始；
-
animation-iteration-count：规定动画被播放的次数；
-
animation-direction：规定动画是否在一下周期逆向播放；
-
animation-play-state：规定动画是否正在运行或暂停；
-
initial：设置属性为其默认值；（IE不支持）
-
inherit：从父元素继承属性；（IE不支持）
浏览器兼容性：
-
Chrome和Safari拓展前缀：-webkit-CSS3属性：值
-
IE9 以及更早版本不支持transition属性
animation-name：指定了一个名称@keyframes animation
-
keyframename：指定要绑定到选择器的关键帧的名称
-
none：指定没有动画，该属性可以用于覆盖任何动画
nanimation-duration：定义动画完成一个周期需要多少秒或毫秒
-
time：指定动画播放完成花费的时间。默认值为0，以为这没有动画效果
animation-timing-function：定义过度动画的效果
-
linear：以相同速度开始至结束的过渡效果
-
ease：慢速开始，然后变快，然后慢速结束的过渡效果
-
ease-in：慢速开始的过度效果
-
ease-out：慢速结束的过渡效果
-
ease-in-out：慢速开始和结束的过渡效果
-
cubic-bezier：在cubic-bezier函数中定义自己的值。可能的值是0-1之间
-
step-start：马上跳转到动画结束状态
-
step-end：保持动画开始状态，直到动画执行时间结束，马上跳转到动画结束
animation-delay：定义动画什么时候开始，单位可以是秒（s）或毫秒（ms）
-
time：可选，定义动画开始前等待的时间，默认值为0
animation-iteration-count：定义动画应该播放多少次
-
n：一个数字，定义应该播放多少次动画
-
infinite：指定动画应该播放无限次（永远）
animation-directions：定义是否循环交替方向播放动画
-
normal：默认值。动画按正常播放。
-
reverse：动画方向播放
-
alternate：动画在奇数次（1.3.5）正向播放，在偶数次（2.4.6）反反播放
-
alternate-reverse：动画在奇数次反向播放，在偶数次正向播放
-
initial：设置该属性为他的默认值
@keyframes语法：
@keyframes animationname {keyframes-selector {css-styles;}}
-
animationname：必需，定义animation的名称
-
keyframes-selector：必需。动画持续时间的百分比
-
css-style：必需。一个或多个合法的CSS样式属性