title: How to make blinking/flashing text with CSS 3
body: <p>Currently, I have this code:</p>
  
  <pre><code>@-webkit-keyframes blinker {
    from { opacity: 1.0; }
    to { opacity: 0.0; }
  }
  
  .waitingForConnection {
    -webkit-animation-name: blinker;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
    -webkit-animation-duration: 1.7s;
  }
  </code></pre>
  
  <p>It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back with <code>opacity: 1.0</code>, then again fades out, appears again, and so on...</p>
  
  <p>I would like it to fade out, and then "raise" from this fade back again to <code>opacity: 1.0</code>. Is that possible?</p>