Karaoke Bouncing Ball Text: CSS Text Animation

Karaoke Bouncing Ball Text

A ball hops across the word, landing on one letter per beat, and each letter dips and lights up as it is hit. Fixed-width letter cells put every landing spot at a known multiple of the cell width.

Also known as: follow the bouncing ball, sing along text animation, bouncing ball over letters.

Color Font size 40px Dark background

HTML

<div class="txt-karaoke-text" aria-label="Karaoke"><span class="txt-karaoke-text-line" aria-hidden="true"><span style="--i: 0">K</span><span style="--i: 1">A</span><span style="--i: 2">R</span><span style="--i: 3">A</span><span style="--i: 4">O</span><span style="--i: 5">K</span><span style="--i: 6">E</span><i class="txt-karaoke-text-ball"></i></span></div>

CSS

.txt-karaoke-text {
  --c: var(--txt-color, #3b82f6);
  font-size: var(--txt-size, 32px);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-block;
  padding-top: 0.75em;
  color: var(--c);}
.txt-karaoke-text-line {
  position: relative;
  display: inline-flex;
}
.txt-karaoke-text-line span {
  width: 0.78em;
  text-align: center;
  color: color-mix(in srgb, var(--c) 60%, transparent);
  transform-origin: 50% 85%;
  animation: txt-karaoke-text-hit 3.15s infinite;
  /* the ball lands on letter i after i + 1 hops of 0.35s */
  animation-delay: calc((var(--i) + 1) * 0.35s);
}
.txt-karaoke-text-ball {
  position: absolute;
  top: 0.08em;
  left: 0.26em;
  width: 0.26em;
  height: 0.26em;
  /* 7 letters + 2 hops off the ends = 9 hops of 0.35s */
  animation: txt-karaoke-text-travel 3.15s linear infinite;
}
.txt-karaoke-text-ball::before {
  content: "";
  display: block;
  height: 100%;
  border-radius: 50%;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: txt-karaoke-text-hop 0.35s infinite;
}
@keyframes txt-karaoke-text-hit {
  0%        { transform: scale(1.1, 0.85); color: var(--c); animation-timing-function: ease-out; }
  6%        { transform: scale(1, 1); color: var(--c); }
  30%, 100% { transform: scale(1, 1); color: color-mix(in srgb, var(--c) 60%, transparent); }
}
@keyframes txt-karaoke-text-travel {
  0%       { transform: translateX(-0.78em); opacity: 0; }
  8%, 90%  { opacity: 1; }
  100%     { transform: translateX(6.24em); opacity: 0; }
}
@keyframes txt-karaoke-text-hop {
  0%, 100% { transform: translateY(0) scale(1.3, 0.7); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  12%      { transform: translateY(-0.2em) scale(0.85, 1.15); animation-timing-function: ease-out; }
  50%      { transform: translateY(-0.62em) scale(1, 1); animation-timing-function: ease-in; }
}

@media (prefers-reduced-motion: reduce) {
  .txt-karaoke-text, .txt-karaoke-text *, .txt-karaoke-text::before, .txt-karaoke-text::after, .txt-karaoke-text *::before, .txt-karaoke-text *::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.

Karaoke Bouncing Ball Text

HTML

CSS

Customizing this snippet

Similar text animations