This is a <span class="type" style="--n:53">CSS only solution for a multi-line writer effect.</span>
body {
  font-family: monospace;
  font-weight: 700;
  font-size:50px;
  padding:20px;
  background:#005F6B;
  color:#00DFFC
}

.type {
  color:#0000;
  background:
    linear-gradient(-90deg,#00DFFC 1ch,#0000 0) 0 0,
    linear-gradient(-90deg,#0000 1ch,#00DFFC 0) 0 0,
    rgba(0,0,0,0.3);
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:text;
  background-clip:text;
  background-repeat:no-repeat;
  animation: 
   b .4s infinite linear,   
   t calc(var(--n)*.4s) steps(var(--n)) forwards;
}

@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  0% {background-position:0 200%,0 0}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.