The effect is similar to the old Zoetrope devices, which presented a series of illustrations in sequence around a cylinder. Instead of a cylinder, we display a flat series of images inside an element.

step_animation.css

.fave {
  width: 100px;
  height: 100px;
  background: url(images/sprite.png) no-repeat;
  background-position: 0 0;
}

.fave:hover {
  background-position: -5500px 0;
  transition: background 1s steps(55);
}