<h1>CSS is awesome!</h1>

@keyframes typing {
  from { 
    width: 0 
  }
 }
 @keyframes caret {
   50% { 
     border-color: currentColor; 
   }
 }
 h1 {
   width: 15ch; /* Width of text */
   overflow: hidden;
   white-space: nowrap;
   border-right: .05em solid transparent;
   animation: typing 6s steps(15),caret 1s steps(1) infinite;
}

var aH1 = document.getElementsByTagName('h1');

for(var i = 0, len = aH1.length; i < len; i++){
	
	var textLen = aH1[i].textContent.length, s = aH1[i].style;
	s.width = textLen + 'ch';
	s.animationTimingFunction = "steps("+textLen+"),steps(1)";
}