CSS animation-timing-function 属性中的 steps() 与 step-start，step-end

steps() 设置间隔参数，可以实现分步过渡

第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

steps() 的实现方法：

    background-image: url('images/heart-sprite.png');

    -webkit-animation: animate 1s steps(28) infinite;

            animation: animate 1s steps(28) infinite;

    background-image: url('images/star-sprite.png');

    -webkit-animation: animate 1s steps(28) infinite;

            animation: animate 1s steps(28) infinite;

step-start 可以实现与 steps() 效果相同的动画

step-start 等同于 steps(10,start) 动画分成10步，动画执行时为开始左侧端点的部分为开始。
step-end 等同于 steps(10,end) 动画分成10步，动画执行时以结尾端点为开始，默认值为 end。

step-start 的实现方法：

    background-image: url('images/heart-sprite.png');

    -webkit-animation: animateTwo 1s infinite step-start;

            animation: animateTwo 1s infinite step-start;

    background-image: url('images/star-sprite.png');

    -webkit-animation: animateTwo 1s infinite step-start;

            animation: animateTwo 1s infinite step-start;

    3.4% {  background-position: -100px 0; }

    6.8% {  background-position: -200px 0; }

    10.2%{  background-position: -300px 0; }

    13.6%{  background-position: -400px 0; }

    17%  {  background-position: -500px 0; }

    20.4%{  background-position: -600px 0; }

    23.8%{  background-position: -700px 0; }

    27.2%{  background-position: -800px 0; }

    30.6%{  background-position: -900px 0; }

    34%  {  background-position: -1000px 0; }

    37.4%{  background-position: -1100px 0; }

    40.8%{  background-position: -1200px 0; }

    44.2%{  background-position: -1300px 0; }

    47.6%{  background-position: -1400px 0; }

    51%  {  background-position: -1500px 0; }

    54.4%{  background-position: -1600px 0; }

    57.8%{  background-position: -1700px 0; }

    61.2%{  background-position: -1800px 0; }

    64.6%{  background-position: -1900px 0; }

    68%  {  background-position: -2000px 0; }

    71.4%{  background-position: -2100px 0; }

    74.8%{  background-position: -2200px 0; }

    78.2%{  background-position: -2300px 0; }

    81.6%{  background-position: -2400px 0; }

    85%  {  background-position: -2500px 0; }

    88.4%{  background-position: -2600px 0; }

    91.8%{  background-position: -2700px 0; }

    95.2%{  background-position: -2800px 0; }

steps(1,start) 等同于 step-start，steps(1,end) 等同于 step-end

动画帧数在线生成：http://tid.tenpay.com/labs/css3_keyframes_calculator.html

巴特西