<div id="container">
<span id="teletype" hidden></span>
</div>
<form class="hideaway">
  <input type="text" id="typer" value="Somewhere in the South Pacific">
  <input type="submit" value="Type It!">
</form>
@keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: black;
  }
}
* {
  box-sizing: border-box;
}
body { 
  margin: 0;
}
#container { 
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#teletype { 
  font-family: monospace;
  font-size :2rem;
  display: block;
  width: 33rem;
}
#teletype span {
  animation: blink 1s step-end infinite;
}
form {  
  background: #333;
  padding: 1rem; 
  text-align: center;
  font-size: 1.2rem;
  transition: 1s;
}
#typer { 
  padding: .4rem;
  font-size: inherit;
  width: 36rem;
}
input[type="submit"] {
  font-size: inherit;
  display: inline-block;
  padding: .3rem;
}
.hideaway {
  transform: translateY(5vw);
}
View Compiled
const formEntry = document.getElementsByTagName("form")[0],
cursor = "<span>|</span>";

formEntry.addEventListener("submit", function(e){
    e.preventDefault(); 
      typeIt();
});

function typeIt() {
  let counter = 0,
  typedLen = typer.value.length;
  teletype.innerHTML = cursor;
  teletype.removeAttribute("hidden");
  var i = setInterval(function(){
    teletype.innerHTML = typer.value.substr(0, counter) + cursor;
      counter++;
      if(counter === typedLen + 1) {
          formEntry.classList.toggle("hideaway");
          clearInterval(i);
      }
  }, 100);
}

typeIt();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.