JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="helmet">

</div>

CSS

/* calculate background position 

width of character * # of steps * -1

*/

.helmet{
  background-image:url(http://aninoob.com/particles/sprites/spider/spider.reel.png?p=2);
  background-position:0px 0px;
  animation: dinowalk .7s steps(18) infinite;
  width:200px;
  height:200px;
  position:absolute;
  left:50%;
  top:50%;
  margin-top:-100px;
  margin-left:-100px;
}
@keyframes dinowalk{
  100% { background-position:-3600px 0px; }
}
body{
  background-color:#666;
}