JSFiddle - React, Tailwind, and code Playground

by Kim Ara

HTML

<div class="row">
  <div class="container">
    <img src="http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/images/coin-sprite-animation-sprite-sheet.png" />
    <br>
    <hr>
    <div class="coin"></div>
  </div>
</div>

CSS

.coin{
  width:44px;
  height:40px;
  background-image: url("http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/images/coin-sprite-animation-sprite-sheet.png");
  -webkit-animation: play 1s steps(10) infinite;
  -moz-animation: play 1s steps(10) infinite;
  -ms-animation: play 1s steps(10) infinite;
  -o-animation: play 1s steps(10) infinite;
  animation: play 1s steps(10) infinite;
}

@-webkit-keyframes play{
  from{
    background-position: 0px;
    background-position:-440px;
  }
}

@-moz-keyframes play{
  from{
    background-position: 0px;
    background-position:-440px;
  }
}

@-ms-keyframes play{
  from{
    background-position: 0px;
    background-position:-440px;
  }
}

@-o-keyframes play{
  from{
    background-position: 0px;
    background-position:-440px;
  }
}

@keyframes play{
  from{
    background-position: 0px;
    background-position:-440px;
  }
}