Pulsing Heart CSS animation

Question

I`m working on an animated heart only with CSS.

I want it to pulse 2 times, take a small break, and then repeat it again.

What I have now:

sm         


        

Answer 1

I think this is what you want for your image animation. There is no need of top image. Just use bottom.

#button{
  width:450px;
  height:450px;
  position:relative;
  top:48px;
  margin:0 auto;
  text-align:center;
  }
#heart img{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
 }

 @keyframes heartFadeInOut {
  0%
  {    transform: scale( .5 );  }
  20%
  {    transform: scale( 1 );  }
  40%
  {    transform: scale( .5 );  }
  60%
  {    transform: scale( 1 );  }
  80%
  {    transform: scale( .5 );  }
  100%
  {    transform: scale( .5 );  }
}

#heart img.bottom { 
  animation-name: heartFadeInOut; 
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation-direction: alternate;

}

<div id="heart" >
  <img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>