SOURCE

  <div class="heart"></div>

  .heart {
    width: 50px;
    height: 50px;
    background: url(https://img1.rrzuji.cn/uploads/scheme/2207/13/m/oQsywieNJu1n2iPEV9NQ.png) no-repeat;
    background-size: 100%;
    animation: beat .5s ease-in-out ;
    position: relative;
    margin: 100px;
    &::after {
      display: block;
      content: "";
      position: absoulte;
      width: inherit;
      height: inherit;
      transform: scale(1.8);
      background: url(https://img1.rrzuji.cn/uploads/scheme/2207/13/m/oQsywieNJu1n2iPEV9NQ.png);
      background-size: 100%;
      animation: beat_after .6s linear ;
      animation-delay: .5s;
      opacity:0;
     
    }
  }

@keyframes beat {
  50% {
    transform: scale(0.5);
    opacity: .6;
  }
  100% {
    transform: scale(1);
  }
 
}
@keyframes beat_after {
    30% {
    transform: scale(1.6);
    opacity: 0.2;
  }
  60% {
    transform: scale(1.6);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.8);
    opacity: 0.2;
  }
}