.like-btn,
.clap-btn {
  display: inline-block;
  Cursor: pointer;
  width: 80px;
  height: 45px;
}

.like-btn {
  background: url('https://i.ibb.co/vw78mf3/heart.png') no-repeat 0% 50%;
  background-size: 2900%;
}

.clap-btn {
  background: url('https://i.ibb.co/GVsbrFF/claps.png') no-repeat 0% 50%;
  background-size: 900%;
 }

.like-active,
.clap-active {
  animation-name: animate;
  animation-duration: .8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.like-active {
  animation-timing-function: steps(28);
}

.clap-active {
   animation-timing-function: steps(8);
}
@keyframes animate {
  0%   { background-position: left;  }
  50%  { background-position: right; }
  100% { background-position: right; }
}