var $typer = $('.typer'),txt = $typer.data("text"),tot = txt.length,ch  = 0;

(function typeIt() {   
  if(ch > tot) return;
  $typer.text( txt.substring(0,ch++) );
  setTimeout(typeIt,~~(Math.random()*(300-60+1)+60));
}());

/* PULSATING CARET */
.typer:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  width:1px;
  height:1em;
  background: #000;
  animation: caretPulsate 1s linear infinite; 
  -webkit-animation: caretPulsate 1s linear infinite; 
}
@keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}
@-webkit-keyframes caretPulsate {
  0%   {opacity:1;}
  50%  {opacity:1;}
  60%  {opacity:0;}
  100% {opacity:0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="typer" data-text="Hi! My name is Al. I will guide you trough the Setup process."></span>

所以基本上,jQuery获取元素的数据文本,逐字插入,并且脉冲“插入符号”不是CSS3动画的：在该SPAN的元素之后.

参见：Generate random number between two numbers in JavaScript