W3C里的定义：
animation-timing-function 规定动画的速度曲线。
这个属性有很多取值，
linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内然后今天我想巴拉的是steps(1,start)和steps(1,end)的区别；
首先，
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。
第一个参数必须为正整数，指定了函数中的间隔数量。
第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。
第二个参数是可选的，默认值为end。
step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。
上例子吧！
.bird{
min-width: 91px;
min-height: 71px;
background: url(../img/bird.png) -182px 0px no-repeat;
}
.birdFly {
animation: bird-slow 900ms infinite steps(1,start);
}
@keyframes bird-slow{
0% {
background-position: -182px 0px;//第三只小鸟
}
50% {
background-position: 0px 0px;//第一只小鸟
}
75% {
background-position: -91px 0px;//第二只小鸟
}
100% {
background-position: -182px 0px;//第三只小鸟
}
}
图片是这张雪碧图；动画效果就是模拟小鸟展翅飞翔，一直扇动翅膀；默认是先显示第三只小鸟
steps(1,start);第一个参数为1的意思就是，每俩关键帧之间只要1步完成，也就是0%-50%，只分为一步完成，50%-75%，也是一步完成；以此类推；注意steps的设置都是针对两个关键帧之间的，而非是整个keyframes；
timing-function 作用于每两个关键帧之间，而不是整个动画。
steps(1,start) ： 第一只鸟和第二只鸟相互切换steps(1,end) ： 第三只鸟和第一只鸟相互切换start跳过0%，end跳过100%
step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了第一只鸟
step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了第三只鸟
然后思考下，此时我们设置成start，小鸟会是怎样的呢？
答案是：
start:进入页面就会显示第一只小鸟，因为跳过了0%；
end:进入页面就会显示第三只小鸟，因为跳过了100%；
所以如果你一进来想显示小鸟展翅的样子就得是start,如果是一进来展示小鸟收翅膀的样子，那就设置成end;
个人觉得一进来看到小鸟展翅的样子还是比较喜欢的，哇哈哈哈、
再说下"forwards"和"infinite"
使用"forwards"和"infinite"对步数的的作用是不同的。
如果我们改变成"infinite"，将不会出现"100%",因为"forwards"命令使动画在我们设置的步数外添加了额外的一步。
"forwards"使动画保持结束时的状态，所以在步数执行完毕后，动画会跳到最后一帧的状态并保持不变。
（做那种雨滴滴下来，然后种子就发芽，然后就长成了参天大树，就定格到最后一帧的大树的效果；animation: grow 5000ms forwards steps(20);这里的steps是你的雪碧图里的图片的数量减一哦）
总结：
steps函数，它可以传入两个参数，第一个是分成多少步完成，第二个参数可选，决定显示效果（是上一帧填充还是下一帧填充）；
steps的设置都是针对两个关键帧之间的，而非是整个keyframes；
timing-function 作用于每两个关键帧之间，而不是整个动画；
"forwards"命令使动画在我们设置的步数外添加了额外的一步。
来源：oschina
链接：https://my.oschina.net/u/4379890/blog/4000605