Version Number Bump: CSS Text Animation

Version Number Bump

A package version rolls from v2.4.9 to v2.5.0, then v2.5.1, then spins up to v3.0.0, each with a minor, patch or major tag springing in. Three digit strips that each roll forward.

Also known as: version number animation, semver bump animation, release version counter, number animation css.

Color Font size 40px Dark background

HTML

<div class="txt-version-bump-roll" aria-label="@acme/ui released v3.0.0">
  <span class="txt-version-bump-roll-pkg" aria-hidden="true">@acme/ui</span>
  <span class="txt-version-bump-roll-row" aria-hidden="true">
    <span class="txt-version-bump-roll-ver">v<span class="txt-version-bump-roll-col"><span class="txt-version-bump-roll-major">23</span></span>.<span class="txt-version-bump-roll-col"><span class="txt-version-bump-roll-minor">4567890</span></span>.<span class="txt-version-bump-roll-col"><span class="txt-version-bump-roll-patch">901234567890</span></span></span>
    <span class="txt-version-bump-roll-tags"><span style="--k: 0">minor</span><span style="--k: 1">patch</span><span class="txt-version-bump-roll-major-tag" style="--k: 2">major</span></span>
  </span>
</div>

CSS

.txt-version-bump-roll {
  --c: var(--txt-color, #3b82f6);
  font-size: calc(var(--txt-size, 32px) * 0.9);
  font-family: system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  display: inline-grid;
  gap: 0.15em;
  --t: 8.8s;}
.txt-version-bump-roll-pkg {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.45em;
  font-weight: 500;
  opacity: 0.55;
}
.txt-version-bump-roll-row {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.txt-version-bump-roll-ver {
  display: inline-flex;
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  animation: txt-version-bump-roll-fade var(--t) infinite;
}
.txt-version-bump-roll-col {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  line-height: 1.15em;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.txt-version-bump-roll-col > span {
  display: block;
  width: 1ch;
  text-align: center;
  word-break: break-all;
}
.txt-version-bump-roll-major { animation: txt-version-bump-roll-major var(--t) infinite; }
.txt-version-bump-roll-minor { animation: txt-version-bump-roll-minor var(--t) infinite; }
.txt-version-bump-roll-patch { animation: txt-version-bump-roll-patch var(--t) infinite; }
.txt-version-bump-roll-tags {
  display: grid;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.45em;
  font-weight: 650;
}
.txt-version-bump-roll-tags span {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 0.25em 0.6em;
  border-radius: 99em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
  opacity: 0;
  animation: txt-version-bump-roll-tag var(--t) infinite;
}
.txt-version-bump-roll-tags span:nth-child(2) {
  color: inherit;
  background: color-mix(in srgb, currentColor 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  animation-name: txt-version-bump-roll-tag-2;
}
.txt-version-bump-roll-tags .txt-version-bump-roll-major-tag {
  color: #fff;
  background: var(--c);
  box-shadow: 0 0.3em 0.8em -0.3em var(--c);
  animation-name: txt-version-bump-roll-tag-3;
}
@keyframes txt-version-bump-roll-major {
  0% { transform: translateY(0); }
  10.23% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  17.05% { transform: translateY(0); }
  35.23% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  42.05% { transform: translateY(0); }
  60.23% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  71.59% { transform: translateY(-1.15em); }
  93.18% { transform: translateY(-1.15em); }
  93.41%, 100% { transform: translateY(0); }
}
@keyframes txt-version-bump-roll-minor {
  0% { transform: translateY(0); }
  10.23% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  17.05% { transform: translateY(-1.15em); }
  35.23% { transform: translateY(-1.15em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  42.05% { transform: translateY(-1.15em); }
  60.23% { transform: translateY(-1.15em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  71.59% { transform: translateY(-6.9em); }
  93.18% { transform: translateY(-6.9em); }
  93.41%, 100% { transform: translateY(0); }
}
@keyframes txt-version-bump-roll-patch {
  0% { transform: translateY(0); }
  10.23% { transform: translateY(0); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  17.05% { transform: translateY(-1.15em); }
  35.23% { transform: translateY(-1.15em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  42.05% { transform: translateY(-2.3em); }
  60.23% { transform: translateY(-2.3em); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  71.59% { transform: translateY(-12.65em); }
  93.18% { transform: translateY(-12.65em); }
  93.41%, 100% { transform: translateY(0); }
}
@keyframes txt-version-bump-roll-fade {
  0%, 89.77% { opacity: 1; filter: none; }
  93.18%, 93.75% { opacity: 0; filter: blur(0.06em); }
  97.73%, 100% { opacity: 1; filter: none; }
}
@keyframes txt-version-bump-roll-tag {
  0%, 14.2% { opacity: 0; transform: scale(0.7); }
  17.05% { opacity: 1; transform: scale(1.06); }
  19.32%, 36.36% { opacity: 1; transform: none; }
  38.64%, 100% { opacity: 0; transform: translateY(-0.3em); }
}
@keyframes txt-version-bump-roll-tag-2 {
  0%, 39.2% { opacity: 0; transform: scale(0.7); }
  42.05% { opacity: 1; transform: scale(1.06); }
  44.32%, 61.36% { opacity: 1; transform: none; }
  63.64%, 100% { opacity: 0; transform: translateY(-0.3em); }
}
@keyframes txt-version-bump-roll-tag-3 {
  0%, 64.2% { opacity: 0; transform: scale(0.7); }
  67.05% { opacity: 1; transform: scale(1.06); }
  69.32%, 89.77% { opacity: 1; transform: none; }
  92.05%, 100% { opacity: 0; transform: translateY(-0.3em); }
}
@media (prefers-reduced-motion: reduce) {
  .txt-version-bump-roll, .txt-version-bump-roll *, .txt-version-bump-roll *::before, .txt-version-bump-roll *::after { animation: none !important; }
}

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

Version Number Bump

HTML

CSS

Customizing this snippet

Similar text animations