PNG Sprite Animation with CSS

animation.html

<style type="text/css">

.pngAnimation {
  background: url(../assets/img/ourdio-sprite-png.png) no-repeat left top;
  background-size: 2900%; /* 28+1 steps * 100% */
  height: 50px;
  width: 50px;
  animation: o-burst 1000ms steps(28) infinite;
}

@keyframes o-burst{
  0%   { background-position:left  }
  100% { background-position:right }
}

</style>

<div class="pngAnimation"></div>