<div>
  <p>Initializing Systems ......</p>
  <p>System Initialized</p>
  <p>Thank you for choosing XXX Corp</p>
  <p>Information Required...</p>
  <p>#####################</p>
  <p>User: Seeker</p>
  <p>Password: ******</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;} }



@keyframes caret { 50% {border-color:transparent;}}

p{
	font-family:monospace;
	width:0;
	border-right:2px solid;
	overflow:hidden;
	animation: typing calc(.1s * 29) steps(29) forwards,
	caret .5s step-end  alternate infinite ; 
	margin:0 0 6px -4px;
	font-size:1.8rem;
	white-space:nowrap;
	padding-right:2px;
	text-indent:2px;
}
p a {color:red;}

p:nth-child(1) {animation-delay:0s, 0s;}
p:nth-child(2) {animation: typing1 calc(.1s * 19) steps(19) forwards calc(.1s * 29),caret .5s step-end  alternate infinite}
p:nth-child(3) {animation: typing2 calc(.1s * 32) steps(32) forwards calc(.1s * 48),caret .5s step-end  alternate infinite}
p:nth-child(4) {animation: typing3 calc(.1s * 24) steps(24) forwards calc(.1s * 80),caret .5s step-end  alternate infinite}
p:nth-child(5) {animation: typing4 calc(.1s * 22) steps(22) forwards calc(.1s * 104),caret .5s step-end  alternate infinite}
p:nth-child(6) {animation: typing5 calc(.1s * 13) steps(13) forwards calc(.1s * 126),caret .5s step-end  alternate infinite}
p:nth-child(7) {animation: typing6 calc(.1s * 17) steps(17) forwards calc(.1s * 139),caret .5s step-end  alternate infinite}
p:nth-child(8) {animation: typing7 calc(.1s * 23) steps(23) forwards calc(.1s * 156),caret .5s step-end  alternate infinite}
div{display:table;overflow:hidden;margin:auto;}