JSFiddle - React, Tailwind, and code Playground

by Outrora

HTML

<div class="animation"></div>

CSS

body {
  background: #f1f1f1;
}
.animation {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  background-image: url('http://127.0.0.1:8080/test3.png');
  /* background-image: url('https://i.imgur.com/4cHFZyv.png'); */
  animation: anim .6s steps(19);
  animation-fill-mode: forwards;
}
@keyframes anim {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -5687px;
  }
}