codepens/2021-to-2022/dist/style.css

@import url('https://fonts.googleapis.com/css2?family=Chango&display=swap');

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px;  
  background: #3693;
}

.year {
  --duration: 1.5s;
  --color: #147;
  --shade: #57b;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Chango, Arial, sans-serif;
  font-size: 150px;
  transform-style: preserve-3d;
}

@keyframes rotate {
  0% { 
    transform: rotate3d(0, 1, 0, 0deg); 
  }
  100% { 
    transform: rotate3d(0, 1, 0, -360deg); 
  }
}

@keyframes jump {
  0%, 75%, 100% {
    margin-top: 0;
  }
  50% {
    margin-top: -20px;
  }
}

.letter {
  position: relative;
  animation: rotate var(--duration) linear, jump var(--duration) linear;
  atransform: rotate3d(0, 1, 0, 90deg);
  width: 120px;
  height: 110px;
  transform-style: preserve-3d;
}

.letter div {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 110px;
  color: var(--color);
  
}

.letter span {
  position: absolute;
  left: 50%;
  
  transform: translate(-50%, -50%) rotateY(90deg);
  display: block;
 
  width: 12px;
  background: var(--color);
}

.letter-2 span,
.letter-1 span{
  top: 53%;
  height: 95%;
}

.letter-0 span {
  top: 54.25%;
  left: 40%;
  height: 98%;
}





.letter div:nth-child(2) {
  transform: translate3d(0, 0, 3px);
}

.letter div:nth-child(3) {
  color: var(--shade);
  transform: translate3d(0, 0, 6px);
}

.letter div:nth-child(4) {
  transform: translate3d(0, 0, -3px);
}

.letter div:nth-child(5) {
  color: var(--shade);
  transform: translate3d(0, 0, -6px);
}

.letter-2 div::before {
  content: "2";
}

.letter-0 div::before {
  content: "0";
}

@keyframes changeYear {
  0%, 25% { content: "1" }
  25.5%, 100% { content: "2" } 
}


@keyframes updateFilling {
  0%, 25% { 
    top: 55%;
    height: 95%;
  }
  25.5%, 100% { 
    top: 53%;
    height: 95%;
  } 
}

.letter-1 div::before {
  content: "1";
  animation: changeYear var(--duration) calc(var(--duration) * 2.4) forwards;
}

.letter-1 span {
  top: 55%;
  height: 95%;
  animation: updateFilling var(--duration) calc(var(--duration) * 2.4) forwards;
}

.letter:nth-child(1) { animation-delay: calc(var(--duration) * 0.6); }
.letter:nth-child(2) { animation-delay: calc(var(--duration) * 1.2); }
.letter:nth-child(3) { animation-delay: calc(var(--duration) * 1.8); }
.letter:nth-child(4) { animation-delay: calc(var(--duration) * 2.4); }