先来看一个动画效果，如下图，图中白衣服人物的手指有3个动作，并不是连续的，实际是3个step，要做这样的动画，我们可以准备一张背景图，背景图中包含3种动作

背景图

利用CSS  animation的steps() 实现

在动画中只需设置背景的起始位置x，初始为0，结束为300%，animation中设置动画的速度曲线为steps(3)，也就是分3步，通过steps实现的动画不会增加中间状态，只是进行3个step的切换

#bg{
    background-image: url(img/gif.png);
    width:360px;
    height:312px;
    background-size:300% 100%;
    -webkit-animation:b 2s steps(3) infinite;
    animation:b 2s steps(3) infinite
}

@keyframes b{
    0%{background-position-x:0}
    to{background-position-x:-300%}
}

利用step-end 自定义每个step

#bg{
    background-image: url(img/gif.png);
    width:360px;
    height:312px;
    background-size:300% 100%;
    animation:b 2s step-end infinite
}
@keyframes b{
    0%{background-position-x:0}
    30%{background-position-x:-100%}
    60%{background-position-x:-200%}
    100%{background-position-x:-300%}
}

通过js定时更改background-position-x

setInterval(function(){
    var p=$("#bg").css('backgroundPositionX')
    
    if(p=="0px"){
        $("#bg").css('backgroundPositionX',"180px")
    }else if(p=="180px"){
        $("#bg").css('backgroundPositionX',"360px")
    }else {
        $("#bg").css('backgroundPositionX',"0px")
    }
},800)