Mac System 7 Welcome Screen

<div class="txt-system-7-welcome" aria-label="Welcome to Macintosh">
  <span class="txt-system-7-welcome-box" aria-hidden="true">
    <b>Welcome to Macintosh.</b>
    <span class="txt-system-7-welcome-bar"><span></span></span>
  </span>
  <span class="txt-system-7-welcome-icons" aria-hidden="true"><i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i><i style="--i: 3"></i><i style="--i: 4"></i></span>
</div>

.txt-system-7-welcome {
  --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;
  place-items: center;
  width: 25em;
  height: 12.5em;
  overflow: hidden;
  border-radius: 0.4em;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 18%, #5f5f66) 0 25%, color-mix(in srgb, var(--c) 18%, #8f8f96) 0 50%) 0 0 / 2px 2px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
  font-family: Chicago, Charcoal, Geneva, "Helvetica Neue", system-ui, sans-serif;
  --t: 7s;}
.txt-system-7-welcome-box {
  display: grid;
  gap: 0.75em;
  justify-items: center;
  margin-top: -1.6em;
  padding: 1.1em 1.6em 1em;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0.2em 0.2em 0 #000;
}
.txt-system-7-welcome-box b {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.txt-system-7-welcome-bar {
  display: block;
  width: 12em;
  height: 0.75em;
  padding: 1px;
  border: 1px solid #000;
}
.txt-system-7-welcome-bar span {
  display: block;
  height: 100%;
  background: #000;
  transform-origin: left;
  animation: txt-system-7-welcome-bar var(--t) infinite;
}
.txt-system-7-welcome-icons {
  position: absolute;
  left: 0.9em;
  bottom: 0.9em;
  display: flex;
  gap: 0.6em;
}
.txt-system-7-welcome-icons i {
  position: relative;
  width: 1.6em;
  height: 1.6em;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0.1em 0.1em 0 #000;
  opacity: 0;
}
.txt-system-7-welcome-icons i:nth-child(1) { animation: txt-system-7-welcome-icon-0 var(--t) infinite; }
.txt-system-7-welcome-icons i:nth-child(2) { animation: txt-system-7-welcome-icon-1 var(--t) infinite; }
.txt-system-7-welcome-icons i:nth-child(3) { animation: txt-system-7-welcome-icon-2 var(--t) infinite; }
.txt-system-7-welcome-icons i:nth-child(4) { animation: txt-system-7-welcome-icon-3 var(--t) infinite; }
.txt-system-7-welcome-icons i:nth-child(5) { animation: txt-system-7-welcome-icon-4 var(--t) infinite; }
/* five 1-bit glyphs: a monitor, a speaker, a puzzle piece, a disk and a globe */
.txt-system-7-welcome-icons i::after {
  content: "";
  position: absolute;
  inset: 0.3em;
  background: #000;
}
.txt-system-7-welcome-icons i:nth-child(1)::after { inset: 0.25em 0.25em 0.5em; background: #fff; border: 1px solid #000; box-shadow: 0 0.18em 0 -0.05em #000; }
.txt-system-7-welcome-icons i:nth-child(2)::after { inset: 0.4em 0.65em 0.4em 0.3em; clip-path: polygon(0 30%, 40% 30%, 100% 0, 100% 100%, 40% 70%, 0 70%); }
.txt-system-7-welcome-icons i:nth-child(3)::after { inset: 0.4em; border-radius: 0 0.25em 0 0.25em; box-shadow: 0.25em -0.12em 0 -0.1em #000; }
.txt-system-7-welcome-icons i:nth-child(4)::after { inset: 0.28em; background: linear-gradient(#000 0 0) 50% 0.08em / 50% 30% no-repeat, #fff; border: 1px solid #000; }
.txt-system-7-welcome-icons i:nth-child(5)::after { inset: 0.3em; border-radius: 50%; background: repeating-linear-gradient(90deg, #000 0 1px, #fff 0 0.32em), #fff; border: 1px solid #000; }
@keyframes txt-system-7-welcome-bar {
  0%, 8% { transform: scaleX(0); }
  25% { transform: scaleX(0.3); }
  45% { transform: scaleX(0.55); }
  62% { transform: scaleX(0.8); }
  76%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes txt-system-7-welcome-icon-0 {
  0%, 14.29% { opacity: 0; transform: none; animation-timing-function: steps(1, end); }
  14.43% { opacity: 1; transform: translateY(-0.3em); animation-timing-function: steps(2, end); }
  17.14%, 92% { opacity: 1; transform: none; animation-timing-function: steps(1, end); }
  93%, 100% { opacity: 0; transform: none; }
}
@keyframes txt-system-7-welcome-icon-1 {
  0%, 23.57% { opacity: 0; transform: none; animation-timing-function: steps(1, end); }
  23.71% { opacity: 1; transform: translateY(-0.3em); animation-timing-function: steps(2, end); }
  26.43%, 92% { opacity: 1; transform: none; animation-timing-function: steps(1, end); }
  93%, 100% { opacity: 0; transform: none; }
}
@keyframes txt-system-7-welcome-icon-2 {
  0%, 32.86% { opacity: 0; transform: none; animation-timing-function: steps(1, end); }
  33% { opacity: 1; transform: translateY(-0.3em); animation-timing-function: steps(2, end); }
  35.71%, 92% { opacity: 1; transform: none; animation-timing-function: steps(1, end); }
  93%, 100% { opacity: 0; transform: none; }
}
@keyframes txt-system-7-welcome-icon-3 {
  0%, 42.14% { opacity: 0; transform: none; animation-timing-function: steps(1, end); }
  42.29% { opacity: 1; transform: translateY(-0.3em); animation-timing-function: steps(2, end); }
  45%, 92% { opacity: 1; transform: none; animation-timing-function: steps(1, end); }
  93%, 100% { opacity: 0; transform: none; }
}
@keyframes txt-system-7-welcome-icon-4 {
  0%, 51.43% { opacity: 0; transform: none; animation-timing-function: steps(1, end); }
  51.57% { opacity: 1; transform: translateY(-0.3em); animation-timing-function: steps(2, end); }
  54.29%, 92% { opacity: 1; transform: none; animation-timing-function: steps(1, end); }
  93%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .txt-system-7-welcome, .txt-system-7-welcome *, .txt-system-7-welcome *::before, .txt-system-7-welcome *::after { animation: none !important; }
  .txt-system-7-welcome-icons i { opacity: 1; }
}

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

Similar text animations