How to fade in / out one letter at a time?

Question

When my web page loads using css, I want the text “widget world” to appear on top, as if someone wrote it manually; one letter will appear at a time.

I will use the cursor font. Between each letters, a few milliseconds would appear.

I thought that each letter would separate the div, then fade them out one by one.

Answer 1

Here is a snippet of what 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> 

Answer 2

Here is a simple example of what you will do:

 var text = 'Widget World'; var textElements = text.split("").map(function(c) { return $('<span id="' + c + '">' + c + '</span>'); }); var el = $('#letters'); var delay = 50; // Tune this for different letter delays. textElements.forEach(function(e, i) { el.append(e); e.hide(); setTimeout(function() { e.fadeIn(300) }, 100 + i * delay) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="letters"></div> 

Answer 3

Maybe this way is right for you: fixed width for inline block and animation to reduce or increase its width

 div { display: inline-block; overflow: hidden; white-space: nowrap; animation: example 2s linear 0s infinite alternate; } @keyframes example { from { width: 0; } to { width: 150px; } } 

 <div>some text</div>