解决方法
只是一个简单的方法：
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的元素之后.
