<div class="wcb-chan"></div>

body {
  margin: 30px;
}

/* CSS sprite */
.wcb-chan {
  background: url(http://webcreatorbox.com/sample/images/wcb-chan-animation.svg) no-repeat;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

/* Using steps */
.wcb-chan {
  animation: smile .5s steps(4) alternate infinite;
}
.wcb-chan:hover {
  animation-play-state: paused;
}

@keyframes smile {
  to {
    background-position: -800px 0;
  }
}