CSS3 实现倒计时效果

<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 hundredths tens'>
      <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 class='time-part hundredths 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>

/* play with speed and easing of the animation */
/* =========================================== */
.digit {
  display: inline-block;
  font-size: 200px;
  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: 200px;
  line-height: 0.9;
}

.time-part {
  width: 140px;
  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% {
    transform: translatey(-180px);
  }
  10% {
    transform: translatey(-360px);
  }
  20% {
    transform: translatey(-540px);
  }
  30% {
    transform: translatey(-720px);
  }
  40% {
    transform: translatey(-900px);
  }
  50% {
    transform: translatey(-1080px);
  }
  60% {
    transform: translatey(-1260px);
  }
  70% {
    transform: translatey(-1440px);
  }
  80% {
    transform: translatey(-1620px);
  }
  90% {
    transform: translatey(-1800px);
  }
}
@keyframes seconds-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 seconds-ones {
  0% {
    transform: translatey(-180px);
  }
  10% {
    transform: translatey(-360px);
  }
  20% {
    transform: translatey(-540px);
  }
  30% {
    transform: translatey(-720px);
  }
  40% {
    transform: translatey(-900px);
  }
  50% {
    transform: translatey(-1080px);
  }
  60% {
    transform: translatey(-1260px);
  }
  70% {
    transform: translatey(-1440px);
  }
  80% {
    transform: translatey(-1620px);
  }
  90% {
    transform: translatey(-1800px);
  }
}
@keyframes hundredths-tens {
  0% {
    transform: translatey(-180px);
  }
  10% {
    transform: translatey(-360px);
  }
  20% {
    transform: translatey(-540px);
  }
  30% {
    transform: translatey(-720px);
  }
  40% {
    transform: translatey(-900px);
  }
  50% {
    transform: translatey(-1080px);
  }
  60% {
    transform: translatey(-1260px);
  }
  70% {
    transform: translatey(-1440px);
  }
  80% {
    transform: translatey(-1620px);
  }
  90% {
    transform: translatey(-1800px);
  }
}
@keyframes hundredths-ones {
  0% {
    transform: translatey(-180px);
  }
  10% {
    transform: translatey(-360px);
  }
  20% {
    transform: translatey(-540px);
  }
  30% {
    transform: translatey(-720px);
  }
  40% {
    transform: translatey(-900px);
  }
  50% {
    transform: translatey(-1080px);
  }
  60% {
    transform: translatey(-1260px);
  }
  70% {
    transform: translatey(-1440px);
  }
  80% {
    transform: translatey(-1620px);
  }
  90% {
    transform: translatey(-1800px);
  }
}
body {
  background: #f1614b;
  margin: 0;
  font-family: "aldrich";
}

.wrapper {
  margin: 100px auto;
  width: 1000px;
  position: relative;
}
.wrapper:before, .wrapper:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  height: 20px;
  z-index: 10;
}
.wrapper:before {
  top: 0px;
  background-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz4gphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyi+pgrlznm+pgxpbmvhckdyywrpzw50iglkpsjncmfkiibncmfkawvudfvuaxrzpsjvymply3rcb3vuzgluz0jvecigede9ijaunsigete9ijaumcigedi9ijaunsigeti9ijeumci+phn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0ii2yxnje0yiivpjxzdg9wig9mznnldd0imtawjsigc3rvcc1jb2xvcj0ii2yxnje0yiigc3rvcc1vcgfjaxr5psiwljailz48l2xpbmvhckdyywrpzw50pjwvzgvmcz48cmvjdcb4psiwiib5psiwiib3awr0ad0imtawjsigagvpz2h0psixmdaliibmawxspsj1cmwoi2dyywqpiiavpjwvc3znpia=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0)));
  background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
}
.wrapper:after {
  bottom: 0px;
  background-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz4gphn2zyb2zxjzaw9upsixljeiihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyi+pgrlznm+pgxpbmvhckdyywrpzw50iglkpsjncmfkiibncmfkawvudfvuaxrzpsjvymply3rcb3vuzgluz0jvecigede9ijaunsigete9ijaumcigedi9ijaunsigeti9ijeumci+phn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0ii2yxnje0yiigc3rvcc1vcgfjaxr5psiwljailz48c3rvccbvzmzzzxq9ijewmcuiihn0b3aty29sb3i9iinmmtyxngiilz48l2xpbmvhckdyywrpzw50pjwvzgvmcz48cmvjdcb4psiwiib5psiwiib3awr0ad0imtawjsigagvpz2h0psixmdaliibmawxspsj1cmwoi2dyywqpiiavpjwvc3znpia=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b));
  background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
}