css3中动画animation中的steps()函数

近来在看前端，前端越看越有意思。

做一个动态动起来的图，使用的是背景图移动坐标的方式，帧显示的原理。

先设计了背景图片，右手挥动。

背景图的尺寸为1241px*266px，7幅帧。

// 动画1：人的挥手运行
//显示为帧运行方式，仅定义起止即可。
@keyframes person{
			0%{
				background: url(img/1.png) no-repeat 0px;
			}
			100%{
				background: url(img/1.png) no-repeat -1241px;
			}
		}		
//动画2，整体向右移动
		@keyframes move2{
			from {
				/* transform: translate(0,0); */
			}
			to {
				transform: translate(500px,0);
			}
		}

		.person {
			width: 177px;
			height: 266px;
			background-color: #0000FF;
      //使用动画，两个动画使用逗号分隔
			animation: person 0.2s steps(7,end) infinite alternate,
			                  move2 5s linear infinite alternate; 
		}

结果显示：

这里有一个问题：

7幅帧，steps()中的数是7，会自动将0%和100%间隔7等份的移动，在第一帧的时候，坐标为（0，0），第7帧的时候坐标为（-1241px，0），这里有一个疑问：第7帧的时候实际上是空白了，图片已经完全左移出去了，理论上应该会卡一帧的空白，但是为什么显示正常呢？

这里要说到steps函数中还有一个参数：steps(n,start/end)。

第二个参数start或end，表示阶跃点，start表示一开始就先进行阶跃，end表示每阶段完成后再进行阶跃，默认值为end。

阶越曲线如下：

默认end，因此在第7次阶越时，实际显示的是上一帧，因此也就是说，实际将100%处的帧丢掉了。同理start丢掉的是第一帧。

@keyframes demo2 {
			0% {
				background-color: yellow;
			}
			100% {
				background-color: red;
			}
		}
		.demo2 {
			width: 100px;
			height: 100px;
			border: 1px solid red;
			animation: demo2 1s steps(1,end) infinite;
		}

以上实际显示的背景色是黄色，上一帧。

.demo2 {
			width: 100px;
			height: 100px;
			border: 1px solid red;
			animation: demo2 1s steps(1,start) infinite;
		}

以上改为start后实际显示的是红色，下一帧。

另外steps中的n，代表的是阶越点，关键帧之间的变化，比如stps(5)代表0%-100%之间变化5次，如果关键帧定义为0%，50%，100%，则代表0-50，50-100之间各变化5次。

阶越点是一个变化的时刻，而非一个时间段