JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div class="gif-player anim">
  <div><div></div></div>
</div>

CSS

.gif-player {
  background-image:url("https://i.imgur.com/RYBkJrj.jpg");
  background-size: cover;
  width: 100vw;
  height: 17.95vw;
  position: relative;
}
.gif-player.anim {
  animation: gif-player-anim 2s infinite;
  animation-timing-function: step-end;
}
.gif-player > div {
  width: 60vw;
  height: 7.6vw;
  background-color: black;
  margin: -3.8vw -30vw;
  top: 50%;
  left: 50%;
  position: absolute;
}
.gif-player > div > div {
  background-image:url("https://i.imgur.com/hV8PlcR.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 10vw;
  width: 40vw;
  height: 7.6vw;
}

@keyframes gif-player-anim {
  0% { background-position:0 -0vw; }
  10% { background-position:0 -18.02vw; }
  20% { background-position:0 -36.04vw; }
  30% { background-position:0 -54.06vw; }
  40% { background-position:0 -72.08vw; }
  50% { background-position:0 -90.1vw; }
  60% { background-position:0 -108.12vw; }
  70% { background-position:0 -126.14vw; }
  80% { background-position:0 -144.16vw; }
  90% { background-position:0 -162.18vw; }
  100% { background-position:0 -180.2vw; }
}