You can use the element’s getAnimations method to get an array of all the animations on the element. From there you can loop through the array and call the pause() method on each animation.

const circle = document.querySelector(".circle");
const animations = circle.getAnimations();

animations.forEach(animation => {
  animation.pause();
})

Here’s what the full solution would look like, along with a working example if you’re the curious type.

<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: lightblue;
    margin: auto;
    animation: pulse 1s infinite ease-in-out;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

<div class="circle"></div>
<button class="btn">Pause Animation</button>

<script>
  const btn = document.querySelector(".btn");
  
  btn.addEventListener("click", () => {
    const animations = document.querySelector(".circle")
      .getAnimations();
    
    if (btn.textContent === "Pause Animation") {
      animations.forEach((animation) => {
        animation.pause();
      });
      btn.textContent = "Play Animation";
    } else {
      animations.forEach((animation) => {
        animation.play();
      });
      btn.textContent = "Pause Animation";
    }
  });
</script>

There are other useful properties you can access on the animation object such as currentTime and playbackRate to have even more control over the animation.