<div class="poker"></div>
<button>Toggle Animation</button>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;

  gap: 10px;
}

.poker {
  height: 40vmin;
  width: calc(40vmin / 1.4);
  background-image: url(https://assets.codepen.io/2722301/cards.jpg);
  background-size: cover;
  animation: poker 1s steps(51, end) infinite;
}

@keyframes poker {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

:root {
  --ON: initial;
  --OFF: ;
  --animation-duration: 2s;
}

button {
  --is-raised: var(--OFF);
  padding: 0.625em 1.625em;
  border-radius: 0.2em;
  color: white;
  font: 700 150% / 1 "Exo", Arial, sans-serif;
  cursor: pointer;
  transition: all 0.28s linear;

  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
  background: var(
      --is-raised,
      linear-gradient(hsl(0 0% 100% / 0.3), transparent)
    )
    hsl(200 100% 50%);
  box-shadow: var(
    --is-raised,
    0 1px hsl(0 0% 100% / 0.8) inset,
    0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
  );
  text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
  margin-top: 20px;
}

button:hover {
  --is-raised: var(--ON);
}

button:active {
  box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}

.poker.stop {
  animation-play-state: paused;
}

const button = document.querySelector("button");
const poker = document.querySelector(".poker");

button.addEventListener("click", () => {
  poker.classList.toggle("stop");
});