How to reveal one letter at a time?

Issue

When my web page loads, using CSS, I want the text "widget world" to appear across the top as if someone were writing it manually; one letter at a time would appear.

I'm going to use a cursive font. There would be a few milliseconds delay in between each letter appearing.

I thought to make each letter a separate div then fade them in one by one.

Solution

Here's a snippet for something that you are looking for.

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

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

<p>Hi folks, this is typing animation using CSS</p>

Answered By - Sohrab Hejazi