title: How to create "Blinking" text with CSS only?
body: <p>I'm trying to create a CSS only solution for blinking text. The text should say: </p>
  
  <p>Researching...</p>
  
  <p>and I'd like it to fade-in and fade-out, giving the impression to the user that it's researching at the same pace that a beating heart. </p>
  
  <p>This is the code that I have so far:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;p class="blinking"&gt;Researching...&lt;/p&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.blinking {
      transition: opacity 2s ease-in-out infinite;
    opacity: 1;
  }
  
  @keyframes opacity {
    0% {
      opacity: 1;
    }
  
    50% {
      opacity: 0.5
    }
  
    100% {
      opacity: 0;
    }
  }
  </code></pre>
  
  <p>But this isn't working, also this is for a chrome extenson, so as long as it works in the latest version of chrome should be enough.</p>