12

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.

Ian Jaspers
  • 107
  • 2
  • 6
dot
  • 14,928
  • 41
  • 110
  • 218

3 Answers3

30

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>
Sohrab Hejazi
  • 1,441
  • 6
  • 18
  • 29
4

Here's a simple example of what you would 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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Alexis Dumas
  • 1,299
  • 11
  • 30
2

Maybe this way will fit you: fixed width for inline-block and animation for decrease 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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
JAYBEkster
  • 780
  • 1
  • 6
  • 19