如何在按下按钮时让精灵动画播放下一帧

Question

我对编码非常陌生。我已经设法将以下代码放在一起。这只是一个更大项目的简单开始。 （学习如何做件） 当我按下Next按钮时，我只希望它在精灵中显示下一帧，然后停止等待下一次按下。如果他们按下后面我希望它播放上一张图像。现在它一次播放所有6帧。

<style>
    #ball{
        background: url(ball_bounce.png);
        width: 50px;
        height: 50px;
    }
    @keyframes ball-bounce {
        from { background-position: 0px; }
        to { background-position: -300px; }
    }
</style>
<div id="ball"></div>
    <button id="stopbtn">Back</button>
    <button id="startbtn">Next</button>

<script>
    startbtn.addEventListener("click", function(){
        ball.style.animation = "ball-bounce 0.7s steps(6) 1";
    });
    stopbtn.addEventListener("click", function(){
        ball.style.animation = "";
   });
</script>

任何帮助将不胜感激 感谢