codepens/accessibility-to-a11y/dist/style.css

@keyframes colorize {
  0% {
    color: #909;
  }
  100% {
    color: #e00;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes removeLetters {
  0% {
    max-width: 8vw;
  }
  100% {
    max-width: 0;
  }
}
@keyframes addMargin {
  0% {
    margin: 0 0;
  }
  100% {
    margin: 0 5vw;
  }
}
@keyframes numbersUp {
  0% {
    transform: translate(-50%, 100%);
  }
  100% {
    transform: translate(-50%, -3%);
  }
}
@keyframes lineGrow {
  0% {
    width: 0%;
  }
  100% {
    width: 84%;
  }
}
@keyframes numberUpdate {
  0% {
    content: "";
  }
  9% {
    content: "1";
  }
  18% {
    content: "2";
  }
  27% {
    content: "3";
  }
  36% {
    content: "4";
  }
  45% {
    content: "5";
  }
  54% {
    content: "6";
  }
  63% {
    content: "7";
  }
  72% {
    content: "8";
  }
  81% {
    content: "9";
  }
  90% {
    content: "10";
  }
  100% {
    content: "11";
  }
}
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

div::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0%;
  left: 50%;
  border-bottom: 0.5vw solid #505;
  transform: translate(-50%, 50%);
  animation: lineGrow 1s, fadeOut 1s linear;
  animation-delay: 1s, 8s;
  animation-fill-mode: forwards;
}

div::after {
  content: "";
  font-size: 8vw;
  font-family: 'Courier', 'Courier New', 'Courier New Sans', sans-serif;
  color: #909;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  animation: numberUpdate 5.5s steps(11, end), numbersUp 0.75s linear;
  animation-delay: 2s, 9s;
  animation-fill-mode: forwards;
}

span {
  font-size: 8vw;
  font-family: 'Courier', 'Courier New', 'Courier New Sans', sans-serif;
  color: #909;
  display: inline-block;
  overflow: hidden;
  max-width: 8vw;
}

div span:nth-child(2) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 2s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(3) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 2.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(4) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 3s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(5) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 3.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(6) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 4s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(7) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 4.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(8) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 5s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(9) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 5.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(10) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 6s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(11) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 6.5s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:nth-child(12) {
  animation: colorize 1s, fadeOut 1s linear, removeLetters 0.75s linear;
  animation-delay: 7s, 8s, 9s;
  animation-fill-mode: forwards;
}

div span:first-child, div span:last-child {
  animation: addMargin 0.5s;
  animation-delay: 9s;
  animation-fill-mode: forwards;
}