SOURCE

<div class="sprite-container">
  <div class="sprite"></div>
</div>

<style>
  .sprite-container {
    width: 120px;
    height: 120px;
    overflow: hidden;
    background-color: yellow;
  }

  .sprite {
    width: 120px;
    height: 120px;
    background-image: url('https://main.qcloudimg.com/trisys/assets/home/images/product/ani-storage.png');
    /* background-size: 120px 120px; */
    animation: play-sprite 0.5s steps(24) forwards;

    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
  }

  @keyframes play-sprite {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 -2880px;
    }
  }

  .sprite-container:hover .sprite {
    animation: play-sprite-hover .3s steps(25) forwards;
  }

  @keyframes play-sprite-hover {
    0% {
      background-position: 0 -3000px;
    }
    100% {
      background-position: 0 0;
    }
  }
</style>