AI CSS Animations

Arcade Continue Countdown

An arcade CONTINUE? screen: a chunky pixel digit counts 9 down to 0, popping on every tick, then GAME OVER blinks in. The digit is a 5 by 7 bitmap grid where each pixel reads its own on and off strip.

Also known as: pixel text animation, 8 bit countdown css, continue countdown arcade, game over text css.

HTML

<div class="txt-arcade-continue-countdown" aria-label="Continue? Counting down from 9">
  <span class="txt-arcade-continue-countdown-score" aria-hidden="true"><b>1P</b> 004200</span>
  <span class="txt-arcade-continue-countdown-row" aria-hidden="true">
    <span class="txt-arcade-continue-countdown-ask">CONTINUE?</span>
    <span class="txt-arcade-continue-countdown-digit"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
  </span>
  <span class="txt-arcade-continue-countdown-over" aria-hidden="true">GAME OVER</span>
</div>

CSS

.txt-arcade-continue-countdown {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.5);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  display: inline-grid;
  justify-items: center;
  align-content: center;
  gap: 0.9em;
  width: 24em;
  height: 12.5em;
  border-radius: 0.4em;
  background: radial-gradient(90% 80% at 50% 50%, #12122a, #050510);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  color: #fff;
  --t: 12s;
  --on: color-mix(in srgb, var(--c) 30%, #ffd23f);
  --off: rgb(255 255 255 / 0.05);}
.txt-arcade-continue-countdown-score {
  position: absolute;
  top: 0.9em;
  left: 1.1em;
  font-size: 0.95em;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.txt-arcade-continue-countdown-score b { color: #ff4d6d; }
.txt-arcade-continue-countdown-row {
  display: flex;
  align-items: center;
  gap: 1.1em;
  animation: txt-arcade-continue-countdown-row var(--t) step-end infinite;
}
.txt-arcade-continue-countdown-ask {
  font-size: 1.5em;
  letter-spacing: 0.12em;
  text-shadow: 0.12em 0.12em 0 color-mix(in srgb, var(--c) 70%, #000);
  animation: txt-arcade-continue-countdown-blink 0.5s steps(1) infinite;
}
.txt-arcade-continue-countdown-digit {
  display: grid;
  grid-template-columns: repeat(5, 0.78em);
  grid-auto-rows: 0.78em;
  gap: 0.1em;
  filter: drop-shadow(0 0 0.4em color-mix(in srgb, var(--on) 55%, transparent));
  animation: txt-arcade-continue-countdown-pop 1s steps(3) infinite;
}
.txt-arcade-continue-countdown-digit i {
  background-size: 1100% 100%;
  animation: txt-arcade-continue-countdown-frames var(--t) step-end infinite;
}
.txt-arcade-continue-countdown-digit i:nth-child(1) { background-image: linear-gradient(90deg, var(--off) 0% 18.18%, var(--on) 18.18% 27.27%, var(--off) 27.27% 36.36%, var(--on) 36.36% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 63.64%, var(--off) 63.64% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(2) { background-image: linear-gradient(90deg, var(--on) 0% 27.27%, var(--off) 27.27% 36.36%, var(--on) 36.36% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 72.73%, var(--off) 72.73% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(3) { background-image: linear-gradient(90deg, var(--on) 0% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(4) { background-image: linear-gradient(90deg, var(--on) 0% 72.73%, var(--off) 72.73% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(5) { background-image: linear-gradient(90deg, var(--off) 0% 18.18%, var(--on) 18.18% 27.27%, var(--off) 27.27% 36.36%, var(--on) 36.36% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 63.64%, var(--off) 63.64% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(6) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 36.36%, var(--on) 36.36% 45.45%, var(--off) 45.45% 63.64%, var(--on) 63.64% 72.73%, var(--off) 72.73% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(7) { background-image: linear-gradient(90deg, var(--off) 0% 27.27%, var(--on) 27.27% 36.36%, var(--off) 36.36% 72.73%, var(--on) 72.73% 81.82%, var(--off) 81.82% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(8) { background-image: linear-gradient(90deg, var(--off) 0% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 72.73%, var(--on) 72.73% 81.82%, var(--off) 81.82% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(9) { background-image: linear-gradient(90deg, var(--off) 0% 45.45%, var(--on) 45.45% 63.64%, var(--off) 63.64% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(10) { background-image: linear-gradient(90deg, var(--on) 0% 27.27%, var(--off) 27.27% 63.64%, var(--on) 63.64% 72.73%, var(--off) 72.73% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(11) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 45.45%, var(--off) 45.45% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(12) { background-image: linear-gradient(90deg, var(--off) 0% 36.36%, var(--on) 36.36% 54.55%, var(--off) 54.55% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(13) { background-image: linear-gradient(90deg, var(--off) 0% 36.36%, var(--on) 36.36% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 63.64%, var(--off) 63.64% 72.73%, var(--on) 72.73% 81.82%, var(--off) 81.82% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(14) { background-image: linear-gradient(90deg, var(--off) 0% 18.18%, var(--on) 18.18% 27.27%, var(--off) 27.27% 36.36%, var(--on) 36.36% 54.55%, var(--off) 54.55% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(15) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 63.64%, var(--on) 63.64% 72.73%, var(--off) 72.73% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(16) { background-image: linear-gradient(90deg, var(--off) 0% 27.27%, var(--on) 27.27% 36.36%, var(--off) 36.36% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(17) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 36.36%, var(--off) 36.36% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(18) { background-image: linear-gradient(90deg, var(--on) 0% 36.36%, var(--off) 36.36% 72.73%, var(--on) 72.73% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(19) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 36.36%, var(--off) 36.36% 45.45%, var(--on) 45.45% 72.73%, var(--off) 72.73% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(20) { background-image: linear-gradient(90deg, var(--on) 0% 9.09%, var(--off) 9.09% 36.36%, var(--on) 36.36% 45.45%, var(--off) 45.45% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(21) { background-image: linear-gradient(90deg, var(--off) 0% 9.09%, var(--on) 9.09% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 36.36%, var(--off) 36.36% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(22) { background-image: linear-gradient(90deg, var(--off) 0% 18.18%, var(--on) 18.18% 27.27%, var(--off) 27.27% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(23) { background-image: linear-gradient(90deg, var(--off) 0% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 63.64%, var(--on) 63.64% 81.82%, var(--off) 81.82% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(24) { background-image: linear-gradient(90deg, var(--off) 0% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(25) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 63.64%, var(--off) 63.64% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(26) { background-image: linear-gradient(90deg, var(--off) 0% 9.09%, var(--on) 9.09% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 63.64%, var(--off) 63.64% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(27) { background-image: linear-gradient(90deg, var(--off) 0% 18.18%, var(--on) 18.18% 27.27%, var(--off) 27.27% 63.64%, var(--on) 63.64% 72.73%, var(--off) 72.73% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(28) { background-image: linear-gradient(90deg, var(--off) 0% 72.73%, var(--on) 72.73% 81.82%, var(--off) 81.82% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(29) { background-image: linear-gradient(90deg, var(--on) 0% 9.09%, var(--off) 9.09% 45.45%, var(--on) 45.45% 54.55%, var(--off) 54.55% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(30) { background-image: linear-gradient(90deg, var(--off) 0% 9.09%, var(--on) 9.09% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 63.64%, var(--off) 63.64% 81.82%, var(--on) 81.82% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(31) { background-image: linear-gradient(90deg, var(--off) 0% 63.64%, var(--on) 63.64% 72.73%, var(--off) 72.73% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(32) { background-image: linear-gradient(90deg, var(--on) 0% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(33) { background-image: linear-gradient(90deg, var(--on) 0% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 45.45%, var(--off) 45.45% 54.55%, var(--on) 54.55% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(34) { background-image: linear-gradient(90deg, var(--off) 0% 9.09%, var(--on) 9.09% 18.18%, var(--off) 18.18% 27.27%, var(--on) 27.27% 90.91%, var(--off) 90.91% 100%); }
.txt-arcade-continue-countdown-digit i:nth-child(35) { background-image: linear-gradient(90deg, var(--off) 0% 63.64%, var(--on) 63.64% 72.73%, var(--off) 72.73% 100%); }
.txt-arcade-continue-countdown-over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.9em;
  letter-spacing: 0.14em;
  color: #ff4d6d;
  text-shadow: 0.1em 0.1em 0 #5a0b1c;
  visibility: hidden;
  animation: txt-arcade-continue-countdown-over var(--t) step-end infinite;
}
@keyframes txt-arcade-continue-countdown-frames {
  0% { background-position: 0% 0; }
  8.33% { background-position: 10% 0; }
  16.67% { background-position: 20% 0; }
  25% { background-position: 30% 0; }
  33.33% { background-position: 40% 0; }
  41.67% { background-position: 50% 0; }
  50% { background-position: 60% 0; }
  58.33% { background-position: 70% 0; }
  66.67% { background-position: 80% 0; }
  75% { background-position: 90% 0; }
  83.33% { background-position: 100% 0; }
}
@keyframes txt-arcade-continue-countdown-pop {
  0% { transform: scale(1.18); }
  30%, 100% { transform: none; }
}
@keyframes txt-arcade-continue-countdown-blink {
  50% { opacity: 0.25; }
}
@keyframes txt-arcade-continue-countdown-row {
  0% { visibility: visible; }
  83.33% { visibility: hidden; }
}
@keyframes txt-arcade-continue-countdown-over {
  0% { visibility: hidden; }
  83.33% { visibility: visible; }
  86.67% { visibility: hidden; }
  88.33% { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .txt-arcade-continue-countdown, .txt-arcade-continue-countdown *, .txt-arcade-continue-countdown *::before, .txt-arcade-continue-countdown *::after { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-arcade-continue-countdown, .txt-arcade-continue-countdown *, .txt-arcade-continue-countdown::before, .txt-arcade-continue-countdown::after, .txt-arcade-continue-countdown *::before, .txt-arcade-continue-countdown *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --txt-color on the element or a parent. Currently previewing #3b82f6.
  • Font size: set --txt-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 40px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar text animations

Breathing Long Shadow
Terminal Typing Effect
Typewriter Carriage Return Effect
Vintage Typewriter Text