SOURCE

<a href="javascript:void(0);" onclick="alert('heart')">
			<div class="heart"></div>
		</a>

html,body{
  width: 100%;
  height: 100%;
}

body{
  margin: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  background-image: radial-gradient(pink, #FF8888);
}

.heart{
  width: 60px;
  height: 60px;
  background-color: tomato;
  position: relative;
  animation:beat .6s infinite ease-in;
}
.heart:before, .heart:after{
  content:"";
  position: absolute;
  width: 60px; height: 60px;
  background-color: tomato;
  border-radius: 50%;
}
.heart:before{
  left: 30px;
}
.heart:after{
  top: -30px;
}

@keyframes beat{
  0%{
    transform:scale(1) rotate(-45deg);
  }
  
  40%{
    transform:scale(1) rotate(-45deg);
  }
  
  55%{
    transform:scale(1.3) rotate(-30deg);
  }
  
  70%{
    transform:scale(1) rotate(-45deg);
  }
  
  85%{
    transform:scale(1.3) rotate(-60deg);
  }
  
  100%{
    transform:scale(1) rotate(-45deg);
  }
 }