参考文档：/dolphinX/p/4087817.html
CSS3的动画：/css3/css3_animation.asp
.cssstyle{
animation: animation-name animation-duration animation-iteration-count;
-webkit-animation: animation-name animation-duration animation-iteration-count;
}
@keyframes animation-name
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes animation-name /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes animation-name /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes animation-name /* Opera */
{
from {top:0px;}
to {top:200px;}
}
animation: animation-name animation-duration animation-iteration-count
animation: name s infinite;
其实完整版的animation参数很多，也可以写成分别的属性
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
今天我们就要关注一下animation-timing-function，大多数动画在时间轴上时线性变化的，jQuery动画的时候我们用的liner参数就是这意思，但CSS3提供了一些其它的变化方式由animation-timing-function属性指定
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps
cubic-bezier
每种动画效果都可以对应一种贝塞尔曲线cubic-bezier可以帮我直观的看一下贝塞尔曲线效果，这里不多说了
steps
我们看一下steps的效果，其实顾名思义就可以想到steps什么意思，就像俄罗斯方块的小格子往下掉也是动画，但是不是连续的，更像是逐帧的，steps就是实现这种效果的
steps的语法
steps(number_of_steps, [start|end])
number_of_steps动画分为多少步执行
direction动画显示状态，end：默认值，第一帧开始前显示，start：第一帧结束后显示
贝塞尔曲线：http://cubic-/
