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 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>
        <span class="digit">1</span>
        <span class="digit">0</span>
      </div>
    </div>
    <div class="time-part minutes 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 seconds 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>
        <span class="digit">1</span>
        <span class="digit">0</span>
      </div>
    </div>
    <div class="time-part seconds 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...

CSS

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

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;
}
.time-part-wrapper:not(:last-child):after {
  content: ":";
  display: block;
  width: 30px;
  height: 230px;
  position: absolute;
  top: 0px;
  right: -30px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 120px;
  line-height: 0.9;
}

.time-part {
  width: 100px;
  text-align: center;
  height: 180px;
  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);
}
.time-part.minutes.tens .digit-wrapper {
  animation-name: minutes-tens;
  animation-duration: 3600s;
  animation-iteration-count: 1;
}
.time-part.minutes.ones .digit-wrapper {
  animation-name: minutes-ones;
  animation-duration: 600s;
  animation-iteration-count: 6;
}
.time-part.seconds.tens .digit-wrapper {
  animation-name: seconds-tens;
  animation-duration: 60s;
  animation-iteration-count: 60;
}
.time-part.seconds.ones .digit-wrapper {
  animation-name: seconds-ones;
  animation-duration: 10s;
  animation-iteration-count: 360;
}
.time-part.hundredths.tens .digit-wrapper {
  animation-name: hundredths-tens;
  animation-duration: 1s;
  animation-iteration-count: 3600;
}
.time-part.hundredths.ones .digit-wrapper {
  animation-name: hundredths-ones;
  animation-duration: 0.1s;
  animation-iteration-count: 36000;
}

@keyframes minutes-tens {
  0% {
    transform: translateY(-180px);
  }
  16.66667% {
    transform: translateY(-360px);
  }
  33.33333% {
    transform: translateY(-540px);
  }
  50% {
    transform: translateY(-720px);
  }
  66.66667% {
    transform: translateY(-900px);
  }
  83.33333% {
    transform: translateY(-1080px);
  }
}
@keyframes minutes-ones {
  0% {
   ...

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
 */