title: How to create a countdown clock with CSS
body: <p>I saw <a href="http://dyn.com/blog/how-to-create-a-countdown-clock-with-css3/" rel="nofollow noreferrer">this article</a> on how to create a CSS countdown timer. It seemed interesting to me, so I tried to follow the instructions and get it to work. Here's what I came up with.
  It doesn't look right and unfortunately the live demo link is broken. What am I doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tens li:nth-of-type(1) {
    animation: digitcount 10s ease-in-out 0s 1;
  }
  
  .tens li:nth-of-type(2) {
    animation: tencount 60s ease-in-out 1s 1;
  }
  
  .tens li:nth-of-type(3) {
    animation: tencount 60s ease-in-out 11s 1;
  }
  
  .tens li:nth-of-type(4) {
    animation: tencount 60s ease-in-out 11s 1;
  }
  
  .tens li:nth-of-type(5) {
    animation: tencount 60s ease-in-out 11s 1;
  }
  
  .tens li:nth-of-type(6) {
    animation: tencount 60s ease-in-out 11s 1;
  }
  
  @keyframes tencount {
    0% {
      opacity: 1
    }
    16.6% {
      opacity: 1
    }
    16.7% {
      opacity: 0
    }
    100% {
      opacity: 0
    }
  }
  
  .digits li:nth-of-type(1) {
    animation: digitcount 10s ease-in-out 0s 6;
  }
  
  .digits li:nth-of-type(2) {
    animation: digitcount 10s ease-in-out 1s 6;
  }
  
  .digits li:nth-of-type(3) {
    animation: digitcount 10s ease-in-out 0s 6;
  }
  
  .digits li:nth-of-type(4) {
    animation: digitcount 10s ease-in-out 1s 6;
  }
  
  .digits li:nth-of-type(5) {
    animation: digitcount 10s ease-in-out 0s 6;
  }
  
  .digits li:nth-of-type(6) {
    animation: digitcount 10s ease-in-out 1s 6;
  }
  
  .digits li:nth-of-type(7) {
    animation: digitcount 10s ease-in-out 0s 6;
  }
  
  .digits li:nth-of-type(8) {
    animation: digitcount 10s ease-in-out 1s 6;
  }
  
  .digits li:nth-of-type(9) {
    animation: digitcount 10s ease-in-out 0s 6;
  }
  
  .digits li:nth-of-type(10) {
    animation: digitcount 10s ease-in-out 1s 6;
  }
  
  @keyframes digitcount {
    0% {
      opacity: 1
    }
    9.9% {
      opacity: 1
    }
    10% {
      opacity: 0
    }
    100% {
      opacity: 0
    }
  }
  
  .done li {
    animation: zero 1s ease-in-out 60s infinite;
  }
  
  @keyframes zero {
    0% {
      opacity: 1
    }
    90% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="clock"&gt;
    &lt;ol class="tens"&gt;
      &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;1&lt;/li&gt;
    &lt;/ol&gt;
    &lt;ol class="digits"&gt;
      &lt;li&gt;0&lt;/li&gt;
      &lt;li&gt;9&lt;/li&gt;
      &lt;li&gt;8&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt;
      &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;1&lt;/li&gt;
    &lt;/ol&gt;
    &lt;ol class="done"&gt;
      &lt;li&gt;0&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>