animation-timing-function: steps(n, [start/end])搓茬。步進(jìn)動(dòng)畫(huà)，動(dòng)畫(huà)從開(kāi)始到結(jié)束不是平滑過(guò)渡的么翰，而是一步一步執(zhí)行青灼，呈現(xiàn)出一種跳躍式的動(dòng)畫(huà)暴心。
n：表示動(dòng)畫(huà)的步數(shù)，或者更專業(yè)點(diǎn)杂拨，階梯數(shù)专普。動(dòng)畫(huà)執(zhí)行時(shí)間會(huì)按照這個(gè)階梯數(shù)進(jìn)行劃分。
start：元素動(dòng)畫(huà)第一步還沒(méi)開(kāi)始執(zhí)行前弹沽，就跳躍到下一步的位置檀夹，從下一步的位置開(kāi)始計(jì)時(shí)，下一步變成了第一步
end：默認(rèn)值策橘，元素動(dòng)畫(huà)最開(kāi)始的位置就是第一步炸渡。
舉例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內(nèi)走6步，每步走100px*/
/*animation: move 6s steps(6); 6s內(nèi)走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長(zhǎng)度花7次蚌堵，每次大約走143px，第一步從-40px開(kāi)始促脉，第二步-182px,-322px,-465px,-608px,-751px,-894px結(jié)束*/
}
}
<div id="pic"></div>
