JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

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

CSS

@keyframes play60 {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -1440px 0px;
  }
}
.shapeshifter {
  animation-duration: 1000ms;
  animation-timing-function: steps(60);
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}
.shapeshifter.play {
  animation-name: play60;
}