title: Pulsing Heart CSS animation
body: <p>I`m working on an animated heart only with CSS.</p>
  
  <p>I want it to pulse 2 times, take a small break, and then repeat it again.</p>
  
  <p>What I have now:</p>
  
  <pre><code>small ==&gt; big ==&gt; small ==&gt; repeat animation
  </code></pre>
  
  <p>What I'm going for: </p>
  
  <pre><code>small ==&gt; big ==&gt; small ==&gt; big ==&gt; small ==&gt; pause ==&gt; repeat animation
  </code></pre>
  
  <p>How can I do it?</p>
  
  <p>My code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="heart" &gt;
    &lt;img class="bottom" src="https://goo.gl/nN8Haf" width="100px"&gt;
    &lt;img class="top" src="https://goo.gl/IIW1KE" width="100px"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>See also <a href="https://jsfiddle.net/sLgo180p/"><strong>this Fiddle</strong></a>.</p>