@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}
@keyframes heartbeat {
  0% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  20% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}
.heart {
  background-color: #991111;
  background-size: cover;
  width: 200px;
  height: 200px;
  margin: 5px;
  -webkit-clip-path: polygon(50% 16%, 60% 6%, 72% 0%, 85% 6%, 90% 30%, 80% 55%, 50% 75%, 20% 55%, 10% 30%, 15% 6%, 28% 0%, 40% 6%);
          clip-path: polygon(50% 16%, 60% 6%, 72% 0%, 85% 6%, 90% 30%, 80% 55%, 50% 75%, 20% 55%, 10% 30%, 15% 6%, 28% 0%, 40% 6%);
}

.beat {
  -webkit-animation: heartbeat 0.8s infinite alternate backwards;
          animation: heartbeat 0.8s infinite alternate backwards;
}

body, html {
  height: 100%;
}

body {
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(darkred));
  background: linear-gradient(to bottom, red, darkred);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}