title: How to re-blink a div using css?
body: <p>I know that we can use the below css to blink a div for the number of times specified:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="blink"&gt;blinking text&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>@-webkit-keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
  }
  @-moz-keyframes blinker {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
  }
  .blink {
  -webkit-animation: blinker 1s 5;
  -moz-animation: blinker 1s 5;
  animation: blinker 1s 5;
  }
  </code></pre>
  
  <p>By using the css way, the div will blink after the page loaded without us calling any js function.
  But then what if i want to re-blink the div after the user press a button? There's no function to call on "onclick".</p>
  
  <pre><code>&lt;button onclick=""&gt;BLINK AGAIN!&lt;/button&gt;
  </code></pre>
  
  <p>Any idea how to do it?</p>
  
  <p><a href="http://jsfiddle.net/Vaysf/867/" rel="nofollow">JSFIDDLE</a></p>