Numbers Animation

HTML

              <div class="digit">
                <div></div>
                <div></div>
                <div class="text">Loading...</div>
              </div>
              

CSS

@keyframes top {
  0%, 10%, 20%, 30%, 40%, 60%, 70%, 90% {
    background: var(--theme-text-color);
  }
  50%, 80% {
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes topleft {
  0%, 10%, 30%, 40%, 50%, 90% {
    background: var(--theme-text-color);
  }
  20%, 60%, 70%, 80% {
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes topright {
  0%, 10%, 20%, 50%, 60%, 70%, 80%, 90% {
    background: var(--theme-text-color);
  }
  30%, 40% {
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes center {
  0%, 10%, 30%, 40%, 50%, 60%, 70% {
    background: var(--theme-text-color);
  }
  20%, 80%, 90% {
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes centerleft {
  0%, 20%, 40%, 50%, 60%, 80% {
    background: rgba(0, 0, 0, 0.1);
  }
  10%, 30%, 70%, 90% {
    background: var(--theme-text-color);
  }
}
@keyframes centerright {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 80%, 90% {
    background: var(--theme-text-color);
  }
  70% {
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes bottom {
  0%, 10%, 30%, 40%, 60%, 70%, 90% {
    background: var(--theme-text-color);
  }
  20%, 50%, 80% {
    background: rgba(0, 0, 0, 0.1);
  }
}
.digit {
  width: 48px;
  height: 48px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.animation .digit {
  animation: inherit;
  animation-duration: 10s;
  animation-timing-function: steps(1);
}

.digit,
.digit:before {
  position: absolute;
  bottom: 0;
  display: block;
}

.digit div:nth-child(1),
.digit div:nth-child(2) {
  display: block;
  height: 10%;
  width: 50%;
  position: relative;
  border-radius: 30%;
  margin: 0 auto;
}

.digit div:nth-child(1)::after,
.digit div:nth-child(1)::before,
.digit div:nth-child(2)::after,
.digit div:nth-child(2)::before {
  height: 400%;
  width: 20%;
  position: absolute;
  content: "";
  border-radius: 30%;
  margin-top: 15%;
}

.digit div:nth-child(1)::before,
.digit div:nth-child(2)::before {
  left: 0;
  margin-left: -15%;
}

.digit div:nth-child(1)::after,
.digit div:nth-child(2)::after {
  right: 0;
  margin-right: -15%;
}

.digit:before {
  content: "";
  width: 50%;
  height: 10%;
  border-radius: 30%;
  margin: 0 0 0 25%;
  animation-name: bottom;
  animation-duration: inherit;
  animation-timing-function: inherit;
}

.digit div:nth-child(1),
.digit div:nth-child(1)::after,
.digit div:nth-child(1)::before,
.digit div:nth-child(2),
.digit div:nth-child(2)::after,
.digit div:nth-child(2)::before {
  animation-name: top;
  animation-duration: inherit;
  animation-timing-function: inherit;
}

.digit div:nth-child(2) {
  top: 35%;
  animation-name: center;
}

.digit div:nth-child(1)::after,
.digit div:nth-child(1)::before,
.digit div:nth-child(2)::after,
.digit div:nth-child(2)::before {
  animation-name: topleft;
}

.digit div:nth-child(1)::after,
.digit div:nth-child(2)::after,
.digit div:nth-child(2)::before {
  animation-name: topright;
}

.digit div:nth-child(2)::after,
.digit div:nth-child(2)::before {
  animation-name: centerleft;
}

.digit div:nth-child(2)::after {
  animation-name: centerright;
}

.digit div:nth-child(3) {
  position: relative;
  top: 90%;
  font-size: 10px;
}
Back to top