How can I trigger this animation to start once in viewport?

Question

How can I trigger this animation to start once in viewport?

<div class="monster"></div>

.monster {
  width: 200px;
  height: 200px;
  margin: -50px auto;
  background: url('/wp-content/uploads/2021/07/sprite1.png') left center;
  animation: play 2.8s steps(15);
  animation-iteration-count: 1
}

@keyframes play {
    100% { background-position: -3000px; }
}

Answer 1

Use an IntersectionObserver in javascript to detect when the element is on screen, then trigger the class that plays the animation like this (I changed your animation values since you wouldn't see them in a SO snippet):

const element = document.querySelector('.monster');
const observer = new IntersectionObserver(entries => {
  element.classList.toggle( 'animation', entries[0].isIntersecting );
});

observer.observe( element );

.monster {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background: black;
}
main {
  margin: 1000px auto;
}

@keyframes play {
    100% { background: red; }
}

.animation {
  animation: play 2.8s steps(15);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.monster:after {
  position: fixed;
  content: 'Keep scrolling!';
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
  transition: opacity .4s;
}
.monster:not(.animation):after {
  opacity: 1;
}

<main>
  <div class="monster"></div>
</main>