CSS - Heart beatiing

by Rodwyn Moreno

HTML

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

CSS

.heart {
  animation: beat 5s infinite ease-in;
  background-color: #ff0000;
  bottom: 50%;
  height: 50px;
  left: 50%;
  position: absolute;
  width: 50px;
}

.heart:before,
.heart:after {
  background-color: #ff0000;
  border-radius: 50%;
  content: "";
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  left: 0;
  top: -25px;
}

.heart:after {
  left: 25px;
  top: 0;
}


@keyframes beat {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    opacity: 1;
    transform: scale(1,1)rotate(-45deg);
  }

  10%,
  30%, 
  50%, 
  70%, 
  90% {
    opacity: 1;
    transform: scale(1.2,1.2)rotate(-45deg);
  }
}