animation-timing-function:steps的坑

animation-timing-function:steps的坑

animation-timing-function:steps(n,[start | end])。
传入一到两个参数，第一个参数把一个关键帧周期分成n等分，然后一个关键帧周期里的动画就会平均的运行。第二个参数start表示从动画的开头运行，相反，end（默认）就表示从动画的结尾开始运行。

	#box{
	  position:relative;
	  width:600px;
	  height:600px;
	  border:1px solid;
	}
	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:4s;
	  animation-timing-function:steps(5);
	  animation-fill-mode:both;
	}
	@keyframes ani{
		0%{
		  transform:translateX(-250PX);
		}
		50%{
		  transform:translateX(0PX);
		}
		100%{
		  transform:translateX(250PX);
		}
	}

HTM代码：

   <div id="box">
	<div class="inner"></div>
   </div>

页面效果：

可以看见0%-50%这个关键帧周期执行了5步，50%-100%这个关键帧周期也执行了5步。

另外：start表示看不到第一帧，end表示看不到最后一帧。

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:5s;
	  animation-timing-function:steps(5,end);
	  animation-iteration-count:3;
	  animation-direction: alternate;
	}
	@keyframes ani{
		0%{
		  transform:translateX(-250PX);
		}
		100%{
		  transform:translateX(250PX);
		}
	}

页面效果：

可以看见第一次移动的时候没有碰到右边的边框，并且当时停留的时间2倍，整个动画完了才碰到右边的边框，因为steps里的第二个参数是end，说明在动画执行的时候，看不到最后一帧，即：transform:translateX(250PX)。
将end换成start：
页面效果：

执行第二次的时候反应出来的问题跟end时候一样，这个时候看不到的是第一帧，即：transform:translateX(-250PX)。

总结：

当animation-iteration-count只有一次的时候，设置animation-timing-function:steps(n,[start | end])是正常的；
当animation-iteration-count多次的时候，设置animation-timing-function:steps的start（动画播放期间的0%）；end（动画播放期间的100%）会看不见，并且停留时间为2倍，只有动画执行完毕或者开始执行前（例如延迟）才会执行第一帧或者最后一帧。

来源：CSDN

作者：阿里山的老王

链接：https://blog.csdn.net/wll_web/article/details/103538404