<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="typing">0123456789</div>
.typing {
  opacity: 0;
  }
.typing span {
  opacity: 0;
  }
$(window).on('load',function(){
// テキストを<span></span>で囲む
$('.typing').children().andSelf().contents().each(function() {
if (this.nodeType == 3) {
$(this).replaceWith($(this).text().replace(/(\S)/g, '<span>$1</span>'));
}
});
// 一文字ずつフェードインさせる
$('.typing').css({'opacity':1});
for (var i = 0; i <= $('.typing').children().size(); i++) {
$('.typing').children('span:eq('+i+')').delay(50*i).animate({'opacity':1},50);
};
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.