JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sm"><div id="sprite"></div></div>

CSS

html, body { width:100%; height:100%; overflow:hidden; }

body {
background-size:100% 100%;
background-repeat:no-repeat;
}

#sprite, #sm
{
  
  width: 100px;
  height: 50px;
  
  background-size:100px 50px;
  background-position: left top;
   -webkit-animation: 
    runSprite .5s infinite step-start,
    run 5s infinite linear;
}

#sprite
{
  background-image:url('http://media.comicvine.com/uploads/4/49256/1673558-superman_fly1.png');
   -webkit-animation: runSprite .5s infinite step-start,
}

#sm
{
   -webkit-animation: run 10s infinite linear;
  position:absolute;
  top:10%;
  left:10%;
}


@-webkit-keyframes 'run' {
 0% {
      left:-10%;
    }

    100% {
      left:100%;
    }

  }