How to get sprite animation to play just the next frame when button is pressed

Question

I am extremely new to coding. I have managed to put together the following code. This is just a simple start to a bigger project. (learning how to do the pieces) When I press the Next button i only want it to show the next frame in sprite and then stop waiting for the next press. If they press the back I want it to do play the previous image. Right now it plays all 6 frames once.

<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>

any help would be appreciated Thanks