title: Pure CSS3 (3, 2, 1) Countdown
body: <p>I'm trying to create a 3 second countdown which automatically starts and then loops. Literally just saying '3' then replaces it with '2' and then finally '1'.</p>
  
  <p>So far the code I'm trying is this:</p>
  
  <pre><code>*[class].countdown:before {
      content: '3' !important;
      -webkit-animation:countdowns 3s ease-in-out infinite;
      -moz-animation:countdowns 3s ease-in-out infinite;
      -ms-animation:countdowns 3s ease-in-out infinite;
      -o-animation:countdowns 3s ease-in-out infinite;
      animation:countdowns 3s ease-in-out infinite;
  }
  
  @-webkit-keyframes countdowns {
      33% {content: '3' !important;}
      66% {content: '2' !important;}
      99% {content: '1' !important;}
  }
  </code></pre>
  
  <p>Then I simply have this as the HTML:</p>
  
  <pre><code>&lt;span class="countdown"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>However this just displays '3' and nothing more. Anybody got any suggestions? Thank you!</p>