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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.