CSS-Only Countdown Clock

BY Yogev Ahuvia - https://codepen.io/kindofone/pen/DkhAz

by Kajus

HTML

<link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <div class="time-part-wrapper">
    <div class="time-part days tens">
      <div class="digit-wrapper">
        <span class="digit">0</span>
        <span class="digit">2</span>
        <span class="digit">1</span>
        <span class="digit">0</span>
      </div>
    </div>
    <div class="time-part days ones">
      <div class="digit-wrapper">
        <span class="digit">0</span>
        <span class="digit">9</span>
        <span class="digit">8</span>
        <span class="digit">7</span>
        <span class="digit">6</span>
        <span class="digit">5</span>
        <span class="digit">4</span>
        <span class="digit">3</span>
        <span class="digit">2</span>
        <span class="digit">1</span>
        <span class="digit">0</span>
      </div>
    </div>
  </div>
  <div class="time-part-wrapper">
    <div class="time-part hours tens">
      <div class="digit-wrapper">
        <span class="digit">0</span>
        <span class="digit">2</span>
        <span class="digit">1</span>
        <span class="digit">0</span>
      </div>
    </div>
    <div class="time-part hours ones">
      <div class="digit-wrapper">
        <span class="digit">0</span>
        <span class="digit">9</span>
        <span class="digit">8</span>
        <span class="digit">7</span>
        <span class="digit">6</span>
        <span class="digit">5</span>
        <span class="digit">4</span>
        <span class="digit">3</span>
        <span class="digit">2</span>
        <span class="digit">1</span>
        <span class="digit">0</span>
      </div>
    </div>
  </div>
  <div class="time-part-wrapper">
    <div class="time-part minutes tens">
      <div class="digit-wrapper">
        <span class="digit">0</span>
        <span class="digit">5</span>
        <span class="digit">4</span>
        <span class="digit">3</span>
        <span class="digit">2</span>
   ...

CSS

/* Play with speed and easing of the animation */
/* =========================================== */
.digit {
  display: inline-block;
  font-size: 100px;
  color: rgba(0, 0, 0, 0.7);
  height: 180px;
  line-height: 1;
}

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;
}
.time-part-wrapper:after {
  content: ":";
  display: block;
  width: 30px;
  height: 230px;
  position: absolute;
  top: 0px;
  right: -30px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 100px;
  line-height: 0.9;
}
.time-part-wrapper:nth-child(1):after {
  content: "d";
  font-size:50px;
  top:40px;
}
.time-part-wrapper:nth-child(2):after {
  content: "h";
  font-size:50px;
  top:40px;
}
.time-part-wrapper:nth-child(3):after {
  content: "m";
  font-size:50px;
  top:40px;
}

.time-part {
  width: 70px;
  text-align: center;
  height: 100px;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
}
.time-part .digit-wrapper {
  animation-timing-function: cubic-bezier(1, 0, 1, 0);
}
/* COUNTDOWN FOR 3 days */
/* Issue: 
if we start from 24 hours to count down, then we can only use "0,1,2,3,4" for the hour-ones
we use 30 hours instead to get all digits 0-9
*/
.time-part.days.tens .digit-wrapper {
  animation-name: days-tens;
  animation-duration: 2592000s; /* in 2592000 s → 3 digits get animated = 864000 s/digit = 240 h/digit = 10 days/digit */
  animation-iteration-count: 2; /* Play the animation 2 times */
}
.time-part.days.ones .digit-wrapper {
  animation-name: days-ones;
  animation-duration: 360000s; /* in 360000 s → 10 digits get animated  = 36000 s/digit = 10 h/digit */
  animation-iteration-count: 30; /* 2592000 / 86400 */
}
.time-part.hours.tens .digit-wrapper {
  animation-name: hours-tens;
  animation-duration: 108000s; /* in 108000 s → 3 digits get animated = 36000 s/digit = 600 min/digit */
  animation-iteration-count: 72; /* 2592000 / 36000 */
}
.time-part.hours.ones .digit-wrapper {
  animation-name:...

JavaScript

/* CSS-Only Countdown Clock © Yogev Ahuvia
 * =======================================
 * A countdown clock that is powered only
 * by CSS. The countdown length is 1 hour
 * and it shows minutes, seconds and the
 * hundredths of seconds as they tick.
 * FORK from https://codepen.io/kindofone/pen/DkhAz
 */