CSS animation-timing-function 屬性中的 steps() 與 step-start，step-end

steps() 設置間隔參數，可以實現分步過渡

第一個參數指定了時間函數中的間隔數量（必須是正整數）
第二個參數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，默認為 end。

steps() 的實現方法：

1. .heart{

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

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

4.             animation: animate 1s steps(28) infinite;

5. }

6. .star{

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

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

9.             animation: animate 1s steps(28) infinite;

10. }

11. @keyframes animate {

12.     from {

13.         background-position: 0 0;

14.     }

15.     to {

16.         background-position: -2800px 0;

17.     }

18. }

step-start 可以實現與 steps() 效果相同的動畫

step-start 等同於 steps(10,start) 動畫分成10步，動畫執行時為開始左側端點的部分為開始。
step-end 等同於 steps(10,end) 動畫分成10步，動畫執行時以結尾端點為開始，默認值為 end。

step-start 的實現方法：

1. .heartTwo{

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

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

4.             animation: animateTwo 1s infinite step-start;

5. }

6. .starTwo{

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

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

9.             animation: animateTwo 1s infinite step-start;

10. }

11. @keyframes animateTwo {

12.     0%   { background-position: 0 0; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

41.     100% { background-position: 0 0; }

42. }

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

動畫幀數在線生成：http://tid.tenpay.com/labs/css3_keyframes_calculator.html