Текст выводящийся по букве, как на печатной машинке, на чистом CSS

 
<section>
  <div class="typewriter">
    Простой пример: какого-то текст, текст, текст, текст
  </div>

  <div class="typewriter no-caret">
    Вариант без каретки: какого-то текст, текст, текст, текст
  </div>

  <div class="typewriter big-caret">
    Вариант большой каретки: какого-то текст, текст, текст, текст
  </div>
</section>

<section>
  <div class="typewriter monospace">
    Простой пример: какого-то текст, текст, текст, текст
  </div>

  <div class="typewriter monospace no-caret">
    Вариант без каретки: какого-то текст, текст, текст, текст
  </div>
  
  <div class="typewriter monospace big-caret">
    Вариант большой каретки: какого-то текст, текст, текст, текст
  </div>
</section>

<section>
  <div class="typewriter monospace big-caret lorem">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor massa. Quisque fermentum nibh non lacus suscipit, et laoreet elit sollicitudin.
  </div>
</section>

 
@keyframes grow {
  0% { max-height: var(--lineHeight); }
  100% { max-height: calc(var(--lineHeight) * var(--lines)); }
}

@keyframes carriageReturn {
  0% { top: 0; }
  100% { top: calc(var(--lineHeight) * var(--lines)); }
}

@keyframes type {
  0% { width: 100%; }
  100% { width: 0%; }
}

@keyframes caret {
  0% { color: var(--bgColor); }
  100% { color: black; }
}

.typewriter {
  --bgColor: white;
  --lines: 500;
  --lineHeight: 1.5rem;
  --timePerLine: 4s;
  --widthCh: 22;
  --width: calc(var(--widthCh) * 1ch);
  /* do not touch the time property!!! */
  --time: calc(var(--lines) * var(--timePerLine));
  animation: grow var(--time) steps(var(--lines));
  animation-fill-mode: forwards;
  background: var(--bgColor);  
  line-height: var(--lineHeight);
  max-height: var(--lineHeight);
  overflow: hidden;
  position: relative;
  width: var(--width);
  /* word-break: break-all; */
}

.typewriter::before {
  content: "";
  animation: 
    type var(--timePerLine) linear infinite, 
    carriageReturn var(--time) steps(var(--lines)) var(--lines),
    caret 0.5s steps(2) infinite;
  background: var(--bgColor);
  border-left: 2px solid;
  bottom: 0;
  height: 2rem;
  position: absolute;
  right: 0;
  width: 100%;
}

.typewriter.no-caret::before {
  border-left-width: 0;
}

.typewriter.big-caret::before {
  border-left-width: 1ch;
}

.typewriter.monospace {
  font-family: monospace, monospace;
}

.typewriter.monospace::before {
  animation: 
    type var(--timePerLine) steps(var(--widthCh)) infinite, 
    carriageReturn var(--time) steps(var(--lines)) var(--lines),
    caret 0.5s steps(2) infinite;
}

/* DEMO */
section {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 1rem;
  position: absolute;
  top: 1rem;
  width: 100%;
}

section:nth-child(2) { top: 10rem; }
section:nth-child(3) { top: 20rem; }

.lorem {
  --widthCh: 60;
  --timePerLine: 6s;
}