Typewriter Effect with Pauses

<div class="txt-typewriter-with-pauses"><span class="txt-typewriter-with-pauses-t">So... what's next?</span><span class="txt-typewriter-with-pauses-caret" aria-hidden="true"></span></div>

.txt-typewriter-with-pauses {
  --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;
  width: calc(18ch + 0.2em);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  text-align: left;
  white-space: pre;}
.txt-typewriter-with-pauses-t {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 0;
  animation: txt-typewriter-with-pauses-type 3.3s linear 0.3s forwards;
}
.txt-typewriter-with-pauses-caret {
  display: inline-block;
  vertical-align: top;
  width: 0.09em;
  height: 1.05em;
  margin-top: 0.08em;
  background: var(--c);
  animation:
    txt-typewriter-with-pauses-think 3.6s step-end,
    txt-typewriter-with-pauses-blink 1s step-end 3.6s infinite;
}
/* "So" fast, three slow dots, a pause, " what's", a pause, " next?" */
@keyframes txt-typewriter-with-pauses-type {
  0% { width: 0; animation-timing-function: steps(2); }
  6.06% { width: 2ch; animation-timing-function: steps(3); }
  37.88%, 50% { width: 5ch; animation-timing-function: steps(7); }
  69.7%, 83.33% { width: 12ch; animation-timing-function: steps(6); }
  99.9%, 100% { width: 18ch; }
}
/* solid while typing, a blink in each pause */
@keyframes txt-typewriter-with-pauses-think {
  0%, 8.3%, 54.2%, 84.7% { opacity: 1; }
  4%, 47.2%, 76.4% { opacity: 0; }
}
@keyframes txt-typewriter-with-pauses-blink {
  50% { opacity: 0; }
}

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

Similar text animations