HTML

1
2
<div class="counter">
    <div class="digit-counter">
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS

1
2
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #0b1217;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-content: center;
  overflow: hidden;
}

.counter {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 4rem;
}

.counter:hover .clock {
  animation-play-state: paused;
}

.digit-counter {
  width: 4rem;
  height: 5.5rem;
  background-color: #1e6c67;
  border-radius: 0.4rem;
  overflow: hidden;
  position: relative;
}

.digit-counter::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, #1e6c67, transparent 20%, transparent 80%, #1e6c67);
}

.counter-digit {
  width: 4rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock {
  animation-timing-function: cubic-bezier(0.5, 0.2, 0.2, 1.3);
  animation-iteration-count: infinite;
}

.clock-1 {
  animation-name: counter-0;
  animation-delay: 1s;
  animation-duration: 10s;
}

@keyframes counter-0 {
  0% {
    transform: translateY(0rem);
  }
  6% {
    transform: translateY(-5.5rem);
  }
  10% {
    transform: translateY(-5.5rem);
  }
  16% {
    transform: translateY(-11rem);
  }
  20% {
    transform: translateY(-11rem);
  }
  26% {
    transform: translateY(-16.5rem);
  }
  30% {
    transform: translateY(-16.5rem);
  }
  36% {
    transform: translateY(-22rem);
  }
  40% {
    transform: translateY(-22rem);
  }
  46% {
    transform: translateY(-27.5rem);
  }
  50% {
    transform: translateY(-27.5rem);
  }
  56% {
    transform: translateY(-33rem);
  }
  60% {
    transform: translateY(-33rem);
  }
  66% {
    transform: translateY(-38.5rem);
  }
  70% {
    transform: translateY(-38.5rem);
  }
  76% {
    transform: translateY(-44rem);
  }
  80% {
    transform: translateY(-44rem);
  }
  86% {
    transform: translateY(-49.5rem);
  }
  90% {
    transform: translateY(-49.5rem);
  }
  96% {
    transform: translateY(-55rem);
  }
  100% {
    transform: translateY(-55rem);
  }
}

.clock-10 {
  animation-name: counter-1;
  animation-delay: 10s;
  animation-duration: 100s;
}

@keyframes counter-1 {
  0% {
    transform: translateY(0rem);
  }
  0.6% {
    transform: translateY(-5.5rem);
  }
  10% {
    transform: translateY(-5.5rem);
  }
  10.6% {
    transform: translateY(-11rem);
  }
  20% {
    transform: translateY(-11rem);
  }
  20.6% {
    transform: translateY(-16.5rem);
  }
  30% {
    transform: translateY(-16.5rem);
  }
  30.6% {
    transform: translateY(-22rem);
  }
  40% {
    transform: translateY(-22rem);
  }
  40.6% {
    transform: translateY(-27.5rem);
  }
  50% {
    transform: translateY(-27.5rem);
  }
  50.6% {
    transform: translateY(-33rem);
  }
  60% {
    transform: translateY(-33rem);
  }
  60.6% {
    transform: translateY(-38.5rem);
  }
  70% {
    transform: translateY(-38.5rem);
  }
  70.6% {
    transform: translateY(-44rem);
  }
  80% {
    transform: translateY(-44rem);
  }
  80.6% {
    transform: translateY(-49.5rem);
  }
  90% {
    transform: translateY(-49.5rem);
  }
  90.6% {
    transform: translateY(-55rem);
  }
  100% {
    transform: translateY(-55rem);
  }
}

.clock-100 {
  animation-name: counter-2;
  animation-delay: 100s;
  animation-duration: 1000s;
}

@keyframes counter-2 {
  0% {
    transform: translateY(0rem);
  }
  0.06% {
    transform: translateY(-5.5rem);
  }
  10% {
    transform: translateY(-5.5rem);
  }
  10.06% {
    transform: translateY(-11rem);
  }
  20% {
    transform: translateY(-11rem);
  }
  20.06% {
    transform: translateY(-16.5rem);
  }
  30% {
    transform: translateY(-16.5rem);
  }
  30.06% {
    transform: translateY(-22rem);
  }
  40% {
    transform: translateY(-22rem);
  }
  40.06% {
    transform: translateY(-27.5rem);
  }
  50% {
    transform: translateY(-27.5rem);
  }
  50.06% {
    transform: translateY(-33rem);
  }
  60% {
    transform: translateY(-33rem);
  }
  60.06% {
    transform: translateY(-38.5rem);
  }
  70% {
    transform: translateY(-38.5rem);
  }
  70.06% {
    transform: translateY(-44rem);
  }
  80% {
    transform: translateY(-44rem);
  }
  80.06% {
    transform: translateY(-49.5rem);
  }
  90% {
    transform: translateY(-49.5rem);
  }
  90.06% {
    transform: translateY(-55rem);
  }
  100% {
    transform: translateY(-55rem);
  }
}

.clock-1000 {
  animation-name: counter-3;
  animation-delay: 1000s;
  animation-duration: 10000s;
}

@keyframes counter-3 {
  0% {
    transform: translateY(0rem);
  }
  0.006% {
    transform: translateY(-5.5rem);
  }
  10% {
    transform: translateY(-5.5rem);
  }
  10.006% {
    transform: translateY(-11rem);
  }
  20% {
    transform: translateY(-11rem);
  }
  20.006% {
    transform: translateY(-16.5rem);
  }
  30% {
    transform: translateY(-16.5rem);
  }
  30.006% {
    transform: translateY(-22rem);
  }
  40% {
    transform: translateY(-22rem);
  }
  40.006% {
    transform: translateY(-27.5rem);
  }
  50% {
    transform: translateY(-27.5rem);
  }
  50.006% {
    transform: translateY(-33rem);
  }
  60% {
    transform: translateY(-33rem);
  }
  60.006% {
    transform: translateY(-38.5rem);
  }
  70% {
    transform: translateY(-38.5rem);
  }
  70.006% {
    transform: translateY(-44rem);
  }
  80% {
    transform: translateY(-44rem);
  }
  80.006% {
    transform: translateY(-49.5rem);
  }
  90% {
    transform: translateY(-49.5rem);
  }
  90.006% {
    transform: translateY(-55rem);
  }
  100% {
    transform: translateY(-55rem);
  }
}

Pure CSS Number Counter

This number digit counter will count from 0 to 9999 one by one without using JavaScript. This is done via CSS by using animation-delay to control the transform property on the <div> that contains the number.

You are free to change anything except animation-delay and animation-duration, or the counter will not work.