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

.step {
  height: 700px;
  background: #ffe8d9;
  position: relative;
}

.step .stepbox {
  width: 800px;
  height: 600px;
  background: url(https://raw.githubusercontent.com/sukjun2/coding2/main/animation/img/ani1.jpg);
  border-radius: 0;
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  animation: ani 1s steps(32, 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: -25600px 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");
});