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>