typing effect CSS

index.html

<p>hi folks, this is typing animation using CSS
 
<span>|</span></p> 

style.css

body{
  background: #000;
  padding-top: 10px;
} 

p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
 /* margin: 10px 0 0 10px;*/
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 1s steps(60, end); 
}





span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

typing effect CSS.markdown

typing effect CSS

A Pen by Karan Bhandari on CodePen.

License.