/*red heart*/

/*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/

#heart {
      position: relative;
      display: inline-block;
      left: 10px;
      width: 30px;
      height: 30px; 
      animation: heartbeat 0.9s 10;
      }
        
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 18px;
      top: 0;
      width: 18px;
      height: 30px;
      background: red;
      border-radius: 100% 100% 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
        
@-webkit-keyframes heartbeat {
  0% {transform: scale( 1,1 );}
  20% {transform: scale( 1.1,1.1 );} 
  40% {transform: scale( 1.3,1.3 );}
}

@keyframes heartbeat {
  0% {transform: scale( 1,1 );}
  20% {transform: scale( 1.1,1.1 );} 
  40% {transform: scale( 1.3,1.3 );}
}


/*end heart*/