如上图，这种效果看着是不是挺“柔”的
附代码
文字一次渐变出现body{
background-color: #333333;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div,span{
color: #ffffff;
font-size: 30px;
}
.hidden{
display: none;
animation: all 1s 1;
}
.display{
display: inline-block;
animation: text 3s 1;
}
@keyframes text {
0%{
color: transparent;
}
100%{
color: #fff;
}
}
var str='我们这一路被带去；抑或为了生？抑或为了死？不，没有死，只有生;我见过生与死：我们无须怀疑，我们有充分的证据；它们迥然不同，令人恐惧;如同死亡，新的诞生也带给我们痛苦;我们回到自己的地方，回到灵魂的国土；遵循过去的天道，让我们不再安逸和幸福;外邦人紧握他们的神，祈求永生；而我乐于再死一次———义无反顾'
//分割为数组
var arr=str.split('')
$.each(arr,function (index,el) {
//依次将每个字放到div里
$('div').append(''+el+'')
//给每个字添加样式，时机为 index*150 ms
setTimeout(function () {
$('#text'+index).addClass('display')
},index*150)
})
这里主要分两步
第一步
利用setTimeout的延时效果依次将文字显示出来，每个文字显示的时机都是 index*150 ms，其实这时主要效果已经出来了，类似那种打字的效果
第二步
利用animation与keyframe实现每个字的渐变效果，颜色从透明过渡到#fff，这样每个字连起来，就实现了如上图的效果
demo体验地址
