<div class="sample">
  <div class="timing step">
    <div class="stepbox">
    </div>
    <span class="stepBtn">
      <a href="#" class="stepBtnStart">Start</a>
      <a href="#" class="stepBtnStop">Stop</a>
    </span>
  </div>
</div>

.step {
  height: 700px;
  background: #43dcf6;
  position: relative;
}
.step .stepbox {
  width: 800px; height: 600px;
  border-radius: 0; background: url(https://raw.githubusercontent.com/younghwan12/coding3/main/animation/img/ani1.jpg);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  animation: ani 1s steps(24, start) infinite;
}
.step .stepbox.start {
  animation-play-state: running;
}
.step .stepbox.stop {
  animation-play-state: paused;
}
@keyframes ani {
  0% {background-position: 0 0;}
  100% {background-position: -19200px 0;}
}
.stepBtn {
  position: absolute; left: 15px; top: 20px;
}
.stepBtn a {
  background: #e16162; color: #fff;
  padding: 10px;
  margin: 3px;
  border-radius: 3px;
}

$(".stepBtnStart").click(function(e){
  e.preventDefault();
  $(".stepbox").removeClass("stop").addClass("start");
});
$(".stepBtnStop").click(function(e){
  e.preventDefault();
  $(".stepbox").removeClass("start").addClass("stop");
});