On the web sprite sheets are used mainly to reduce the amount of HTTP requests by bundling multiple images together into a single image file. Displaying a sub-image involves clipping the sheet in the appropriate coordinates.

TL;DR

.element {
   background-image: url('heart.png');
   /* size of one frame */
   width: 100px;
   height: 100px;
   /* size of the whole sheet */
   background-size: 2900px 100px;
  /* animate the coordinates */
  animation: heartAnimation 2s steps(29, jump-none) infinite;
}

@keyframes heartAnimation {
  from {
    /* first frame */
    background-position: 0px 0px;
  }
  to {
    /* last frame */
    background-position: -2800px 0px;
  }
}