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:
    linear-gradient(#00DFFC 0 0) 0 50%/150% 95%,
    linear-gradient(#00DFFC 0 0) 0 0  /100% 100%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: 
   t 1s forwards,
   b 1s .8s forwards;
}

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