<div>
<h1>hello-world...</h1>
 <h2>People can code</h2>
</div>
body{
  display: grid;/**/
  place-items: center;/*for placing the content exactly center*/
  height: 100vh;/*by default body will not have enough height */
  background: #0a0a0a;
}
h1{
  display: block;
  color:red;
  white-space: nowrap;  
  letter-spacing: .05rem;
  animation : typing 1.5s steps(60, end);
  overflow: hidden;
}
@keyframes typing{
  from {
    width: 1%;
  }
  to{
    width: 100%;
  }
}
h2{
  color: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.