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

转载于:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/7358204.html