Javascript 在不同的随机时间效应下，段落中的每个单词都会褪色

我试图以随机的速度淡入段落中的每一个单词，这样就产生了文字出现在纸上的效果。我正在使用jquery并以这种方式执行它。但是这个接缝很重（是这样吗？）。 请提出更好的方法

$（'body'）.children（'word'）.each（function（））{
$（此）。设置动画({
“不透明度”：“1”
}，Math.floor（Math.random（）*3000）+500）；
});
.word{
不透明度：0；
显示：内联块；
}

你好
怎样
是
你
做
另一种方法是使用css转换

JS:

CSS:


您可以使用如下javascript消除在每个单词周围使用包装器：

$('.content').html($('.content').text().split(/[\s,\.]+/).map(function (word) {
    return '<div class="word">' + word + '</div>'
}).join(''))

$（'.content'）.html（$（'.content'）.text（）.split（/[\s，\.]+/）.map（函数（word）{
返回“”+单词+“”
}).加入（“”）

使用css转换可能更好？对不起，我对css转换非常陌生。你能给我一些提示吗。我在回答中发布了解决方案。希望它会有用谢谢，但是我能让淡入效果也变好吗，我的意思是有没有一种方法可以用css设置不透明的动画？至少我能做些什么，让我用div标记来包围每个单词？没有html元素，无法选择单个单词。。。但是你可以在js中制作包装。我在回答中举例说明
.word {
  opacity: 0;
  display: inline-block;
  transition: opacity 1s linear;
}

$('.content').html($('.content').text().split(/[\s,\.]+/).map(function (word) {
    return '<div class="word">' + word + '</div>'
}).join(''))