<div>
  <p>Initializing Systems ...... <span>|</span></p>
  <p>System Initialized<span>|</span></p>
  <p>Thank you for choosing XXX Corp<span>|</span></p>
  <p>Information Required...<span>|</span></p>
  <p>#####################<span>|</span></p>
  <p>User: Seeker<span>|</span></p>
  <p>Password: ******<span>|</span></p>
  <p>Click <a href="###">"HERE"</a> to submit <span>|</span></p>
</div>

body{background:#000;color:#fff;}
@keyframes typing {0% {width:0;} 100% {width:29ch;}}
@keyframes typing1{0% {width:0;} 100% {width:19ch;}}
@keyframes typing2{0% {width:0;} 100% {width:32ch;} }
@keyframes typing3{0% {width:0;} 100% {width:24ch;} }
@keyframes typing4{0% {width:0;} 100% {width:22ch;} }
@keyframes typing5{0% {width:0;} 100% {width:13ch;} }
@keyframes typing6{0% {width:0;} 100% {width:17ch;} }
@keyframes typing7{0% {width:0;} 100% {width:23ch;} }

p{
	font-family:monospace;
	width:0;
  overflow:hidden;
	position:relative;
	animation: typing calc(.1s * 29) steps(29) forwards; 
	margin:0 0 6px 0;
	font-size:1.8rem;
	white-space:nowrap;
}
p a {color:red;}

span{
  position:absolute;
  right:-7px;
  color:#fff;
  animation:caret .5s infinite;
  opacity:0;
}
@keyframes caret { 50% {opacity:1}}

p:nth-child(1) {animation-delay:0s, 0s;}
p:nth-child(2) {animation: typing1 1.9s steps(19) forwards 2.9s}
p:nth-child(3) {animation: typing2 3.2s steps(32) forwards 4.8s}
p:nth-child(4) {animation: typing3 2.4s steps(24) forwards 8s}
p:nth-child(5) {animation: typing4 2.2s steps(22) forwards 10.4s}
p:nth-child(6) {animation: typing5 1.3s steps(13) forwards 12.6s}
p:nth-child(7) {animation: typing6 1.7s steps(17) forwards 13.9s}
p:nth-child(8) {animation: typing7 2.3s steps(23) forwards 15.6s}

p:nth-child(1) span{animation-iteration-count:7}

p:nth-child(2) span{animation-iteration-count:12}
p:nth-child(3) span {animation-iteration-count:18}
p:nth-child(4) span {animation-iteration-count:22}
p:nth-child(5) span {animation-iteration-count:28}
p:nth-child(6) span {animation-iteration-count:30}
p:nth-child(7) span {animation-iteration-count:33}
p:nth-child(8) span {animation-iteration-count:37}
div{display:table;overflow:hidden;margin:auto;}