JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<html>
<head>
  <link rel="stylesheet" type="text/css" href="sprite_60fps.css"/>
</head>
<body>
  <div class="logoAnimation play" style="background-image: url(sprite_60fps.svg)"></div>

<br><br><br>
  <div class="logoAnimation2x play" style="background-image: url(sprite2x_60fps.svg)"></div>

</body>
</html>

CSS

@keyframes play36 {
  0% {
    background-position: 0px 0px;
  }
  50% {
    background-position: -864px 0px;
  }
  100% {
    background-position: -864px 0px;
  }
}
.logoAnimation {
  animation-duration: 1500ms;
  animation-timing-function: steps(36);
  animation-iteration-count: infinite;
  width: 24px;
  height: 28px;
  background-repeat: no-repeat;
}
.logoAnimation.play {
  animation-name: play36;
}


@keyframes moqopLoad2x {
  0% {
    background-position: 0px 0px;
  }
  50% {
    background-position: -1728px 0px;
  }
  100% {
    background-position: -1728px 0px;
  }
}
.logoAnimation2x {
  animation-duration: 1500ms;
  animation-timing-function: steps(36);
  animation-iteration-count: infinite;
  width: 48px;
  height: 56px;
  background-repeat: no-repeat;
}
.logoAnimation2x.play {
  animation-name: moqopLoad2x;
}