Twitter's "fave" animation using CSS steps()

fave.css

.fave {
  width: 70px;
  height: 50px;
  background: url(http://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png) no-repeat;
  background-position: 0 0;
}
.fave:hover {
  background-position: -3519px 0;
  transition: background 2s steps(55);
}
/* The hover state specifies that the background position be moved to the end of the series of images. The `steps()` timing function is given a value of 55 as there are 55 frames in the animation. Hover jumps through the transition in 55 equal steps. */

fave.htm

<section class="fave"></section>