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 like ketan's answer, but I wanted to improve the heart animation to make it more realistic.

• A heart does not double in size when it beats. 10% change in size looks better to me.
• I like it getting both larger and smaller
• When it stops moving altogether it looks dead to me. Even when it isn't beating, it needs to expand or contract a little
• I removed the "alternate directions" code so that it runs the same way through every time
• I explicitly have the heart start end and at normal scale (1) and have the animation in the middle of the sequence. It seems clearer that way to me.

#heart img{
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
 }

 @keyframes heartFadeInOut {
  0% {transform: scale(1);}
  25% {transform: scale(.97);}
  35% {transform: scale(.9);}
  45% {transform: scale(1.1);}
  55% {transform: scale(.9);}
  65% {transform: scale(1.1);}
  75% {transform: scale(1.03);}
  100% {transform: scale(1);}
}

#heart img.bottom { 
  animation-name: heartFadeInOut; 
  animation-iteration-count: infinite;
  animation-duration: 2s;
}