animation-timing-function: steps(n, [start/end])。步进动画，动画从开始到结束不是平滑过渡的，而是一步一步执行，呈现出一种跳跃式的动画。
n：表示动画的步数，或者更专业点，阶梯数。动画执行时间会按照这个阶梯数进行划分。
start：元素动画第一步还没开始执行前，就跳跃到下一步的位置，从下一步的位置开始计时，下一步变成了第一步
end：默认值，元素动画最开始的位置就是第一步。
举例1：
#pic1{
display: flex;
position: relative;
}
#pic1 div{
width: 100px;
height: 100px;
background-color: rgb(218, 32, 125);
}
#pic1 div::after{
content: '';
display: block;
width: 100px;
height: 100px;
background-color: rgb(41, 172, 52);
position: absolute;
left: 0;
top: 0;
animation: move 6s steps(6,start); /*6s内走6步，每步走100px*/
/*animation: move 6s steps(6); 6s内走6步，每步走100px*/
}
@keyframes move {
to{
transform: translateX(600px);
}
}
<div id="pic1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
举例2：
#pic {
height:90px;
width:65px;
background-position: -40px -44px;
background-image: url("https://static.runoob.com/images/mix/space-to-top.png");
/* animation: .6s go steps(7) infinite; */
animation: 6s go steps(7) infinite;
}
@keyframes go {
0% {
background-position-x: -40px;
}
100% {
background-position-x: -1040px; /*走完1000px长度花7次，每次大约走143px，第一步从-40px开始，第二步-182px,-322px,-465px,-608px,-751px,-894px结束*/
}
}
<div id="pic"></div>
