<div class="text-container">
  <p class="a">HELLO!</p>
  <p class="b">HOW ARE YOU?</p>
</div>

body {
  display: flex;
  justify-content:center;
  height: 100vh;
  align-items: center;  
  background-color: #faedcd;
}

.text-container {
  position: relative;
}

.a, .b {
  font-size: 50px;
  font-family: 'Courier New', monospace;
  letter-spacing: 4px;
  position: relative;
  line-height:.2;
}

.a:before, .b:before {
  content:"";
  position: absolute;
  background-color: #faedcd;
  height: 55px;
  top:-14px;
  left:-2px;
}

.a:before {
  width:220px;
  animation: move 2s steps(6,end) forwards 1s;
}


@keyframes move {
  0% {transform: translateX(0);opacity:1;}
  80% {transform: translateX(201px);opacity:1;}
  100% {transform: translateX(201px); opacity:0;}
}

.a:after, .b:after {
  content:"|";
  font-weight: 100;
  left:-5px;
  top:-2px;
  position: absolute;
}

.a:after {
  animation: move 2s steps(6,end) forwards 1s;
}

.b:before {
  width:420px;
  animation: moveTwo 4s steps(12,end) forwards 3.2s;
}

.b:after {
  opacity:0;
  animation: moveTwo 4s steps(12,end) forwards 3.2s, blink .7s ease infinite 6.5s;
}

@keyframes moveTwo {
  0% {transform: translateX(0);opacity:1;}
  80% {transform: translateX(411px);opacity:1;}
  100% {transform: translateX(411px); opacity:1;}
}

@keyframes blink {
  from { opacity: 1; }	
	to { opacity: 0; }
}

// Click on the text to repeat the animation.

$(document).ready(function(){
  $('.text-container').mouseleave(function(){
    $(this).removeClass('clicked');
  }).click(function(){
    $(this).addClass('clicked').html($(this).html());
  });
});