This is a <span class="type">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:
    repeating-linear-gradient(90deg,#00DFFC 0 1ch,#0000 0 5ch) 0   0,
    repeating-linear-gradient(90deg,#00DFFC 0 1ch,#0000 0 5ch) 1ch 0,
    repeating-linear-gradient(90deg,#00DFFC 0 1ch,#0000 0 5ch) 2ch 0,
    repeating-linear-gradient(90deg,#00DFFC 0 1ch,#0000 0 5ch) 3ch 0,
    repeating-linear-gradient(90deg,#00DFFC 0 1ch,#0000 0 5ch) 4ch 0;
  background-size:100% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  background-repeat:no-repeat;
  animation: t 2.5s forwards;
}

@keyframes t{
  0%   {background-position:0 -100%,1ch -100%,2ch -100%,3ch -100%,4ch -100%}
  20%  {background-position:0  100%,1ch -100%,2ch -100%,3ch -100%,4ch -100%}
  40%  {background-position:0  100%,1ch -100%,2ch  100%,3ch -100%,4ch -100%}
  60%  {background-position:0  100%,1ch  100%,2ch  100%,3ch -100%,4ch -100%}
  80%  {background-position:0  100%,1ch  100%,2ch  100%,3ch  100%,4ch -100%}
  100% {background-position:0  100%,1ch  100%,2ch  100%,3ch  100%,4ch  100%}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.