.sprite {
  width: 128px;
  height: 128px;
  
  /*background-image: url('/32x32/1.png');*/
  background-repeat: no-repeat;

  /*128x128 x 4 (32 pixels each frame)*/
  background-size: 512px 512px;

  image-rendering: pixelated;
  image-rendering: crisp-edges;
  
  animation: play-custom 8s step-end infinite;
}


@keyframes play-custom {
  /* Frame 5 & 6 (4,0 and 4,1)*/
  0%    { background-position: 0px -128px; }    
  6.25% { background-position: -128px -128px; }  

  /* Frame 13 & 14 (5,0 and 5,1) */
  12.5% { background-position: 0px -384px; }    
  18.75%{ background-position: -128px -384px; }  

  /* Frame 7 & 8 (6,0 and 6,1) */
  25%   { background-position: -256px -128px; }  
  31.25%{ background-position: -384px -128px; }  

  /* Frame 15 & 16 (7,0 and 7,1) */
  37.5% { background-position: -256px -384px; }  
  43.75%{ background-position: -384px -384px; }  

  /* Frame 1 & 2 (0,0 and 0,1) */
  50%   { background-position: 0px 0px; }      
  56.25%{ background-position: -128px 0px; }    

  /* Frame 9 & 10 (1,0 and 1,1) */
  62.5% { background-position: 0px -256px; }    
  68.75%{ background-position: -128px -256px; }  

  /* Frame 3 & 4 (2,0 and 2,1) */
  75%   { background-position: -256px 0px; }    
  81.25%{ background-position: -384px 0px; }    

  /* Frame 11 & 12 (3,0 and 3,1) */
  87.5% { background-position: -256px -256px; }  
  93.75%{ background-position: -384px -256px; }  
}