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:

small ==> big ==> small ==> repeat animation 

What I'm going for:

small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation 

How can I do it?

My code :

#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;    -webkit-transition: opacity 7s ease-in-out;    -moz-transition: opacity 7s ease-in-out;    -o-transition: opacity 7s ease-in-out;    transition: opacity 7s ease-in-out;}     @keyframes heartFadeInOut {    0% {      opacity:1;    }    14% {      opacity:1;    }    28% {      opacity:0;    }    42% {      opacity:0;    }    70% {      opacity:0;    }  }    #heart img.top {     animation-name: heartFadeInOut;     animation-timing-function: ease-in-out;    animation-iteration-count: infinite;    animation-duration: 1s;    animation-direction: alternate;    }

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

See also this Fiddle.

Answer 1

You can incorporate the pause into the animation. Like so:

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

Working example: https://jsfiddle.net/t7f97kf4/

@keyframes heartbeat  {    0%    {      transform: scale( .75 );    }    20%    {      transform: scale( 1 );    }    40%    {      transform: scale( .75 );    }    60%    {      transform: scale( 1 );    }    80%    {      transform: scale( .75 );    }    100%    {      transform: scale( .75 );    }  }    div  {    background-color: red;    width: 50px;    height: 50px;    animation: heartbeat 1s infinite;  }

<div>  Heart  </div>

Edit:

Working example with pure CSS heart shape: https://jsfiddle.net/qLfg2mrd/

@keyframes heartbeat  {    0%    {      transform: scale( .75);    }        20%    {      transform: scale( 1);    }        40%    {      transform: scale( .75);    }        60%    {      transform: scale( 1);    }    80% {      transform: scale( .75);    }        100%    {      transform: scale( .75);    }  }    #heart  {    position: relative;    width: 100px;    height: 90px;    animation: heartbeat 1s infinite;  }    #heart:before,  #heart:after  {    position: absolute;    content: "";    left: 50px;    top: 0;    width: 50px;    height: 80px;    background: red;    -moz-border-radius: 50px 50px 0 0;    border-radius: 50px 50px 0 0;    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    transform: rotate(-45deg);    -webkit-transform-origin: 0 100%;    -moz-transform-origin: 0 100%;    -ms-transform-origin: 0 100%;    -o-transform-origin: 0 100%;    transform-origin: 0 100%;  }    #heart:after  {    left: 0;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transform-origin: 100% 100%;    -moz-transform-origin: 100% 100%;    -ms-transform-origin: 100% 100%;    -o-transform-origin: 100% 100%;    transform-origin: 100% 100%;  }

<div id="heart"></div>