time，这里有两个时间，前面一个是规定完成这个动画所需要的时间，全称叫animation-duration，第二个time为动画延迟开始播放的时间，全称叫animation-delay，这两个数值可以用秒’s’也可以用微秒’ms’来写，1000ms=1s，这个不用一一介绍。
animation-timing-function，规定动画的运动曲线，这里有9个值，分别是ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
ease：动画缓慢开始，接着加速，最后减慢，默认值;linear：动画从头到尾的速度是相同的;ease-in：以低速开始；ease-out：以低速结束；ease-in-out：动画以低速开始和结束；说说这个 steps(n,[ start | end ] ]?)这个阶梯函数，这个函数可以把动画平均划分为基本相等的，这个n是一个自然数，意思就是把一个动画平均分成n等分，直到平均地走完这个动画，这个要跟linear区别开来，因为linear是把动画作为一个整体，中间没有断点，而steps是把动画分段平均执行开来。step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。对此，w3c图解如下： 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css3 逐帧动画</title>
<style>
.fly{
position: absolute;
left: 100px;
top: 100px;
width: 126px;/*单个画面图片宽度*/
height: 184px;
background: url(ren.png) no-repeat;/*图片宽度是126*3*/
/*-webkit-animation: run 500ms steps(1) infinite 0s;*/
-webkit-animation: run2 500ms steps(2) infinite 0s;
}
/* 动画方式一 */
@-webkit-keyframes run{
0%{
background-position: 0px;
}
25%{
background-position: -126px 0;
}
50%{
background-position: -252px 0;
}
100%{
background-position: 0px;
}
}
/* 动画方式二 */
@-webkit-keyframes run2{
50%{
background-position: -252px 0;
}
}
</style>
</head>
<body>
<span class="fly"></span>
</body>
</html>
原文：http://www.cnblogs.com/wanghao1991/p/5026024.html