.countdown {
  position: relative; /* needed for absolute spans */
  width: 100px;
  height: 100px;
  font-size: 72px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  margin: 0 auto;
}

.countdown span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;              /* start hidden */
  animation: show 3s linear forwards;
}

/* Each number appears in sequence */
.countdown span:nth-child(1) { animation-delay: 0s; }  /* 3 */
.countdown span:nth-child(2) { animation-delay: 1s; }  /* 2 */
.countdown span:nth-child(3) { animation-delay: 2s; }  /* 1 */

/* Keyframes: visible for ~1s, then disappear */
@keyframes show {
  0% { opacity: 0; }
  10% { opacity: 1; }   /* fade in quickly */
  33% { opacity: 1; }   /* stay visible */
  40% { opacity: 0; }   /* fade out */
  100% { opacity: 0; }
}