CodeHQ

Pulsing heart | CSS

.heart {
    position: relative;
    width: 34px;
    overflow: inherit;
    -webkit-animation: animateHeart 2.5s infinite;
    animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
   position: absolute;
   content: '';
   top: 0;
   left: 17px;
   width: 17px;
   height: 27px;
   background: #3C948B;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg) translateZ(0);
   transform: rotate(-45deg) translateZ(0);
   -webkit-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
.heart:after {
   left: 0;
   -webkit-transform: rotate(45deg) translateZ(0);
   transform: rotate(45deg) translateZ(0);
   -webkit-transform-origin: 100% 100%;
   transform-origin :100% 100%;
}

@-webkit-keyframes animateHeart {
  0%  { -webkit-transform: scale(1); }
  5%  { -webkit-transform: scale(1.2); }
  10% { -webkit-transform: scale(1.1); }
  15% { -webkit-transform: scale(1.3); }
  50% { -webkit-transform: scale(1); }
  100% { -webkit-transform: scale(1); }
}
@keyframes animateHeart {
  0%  { transform: scale(1); }
  5%  { transform: scale(1.2); }
  10% { transform: scale(1.1); }
  15% { transform: scale(1.3); }
  50% { transform: scale(1); }
  100% { transform: scale(1); }
}