Javascript 如何在一个每秒钟有一段文字变化的网站上制作动画？

这就像npm头版和brown hackathon页面上的动画一样。每几秒钟就会有一段文字被删除并以不同的内容出现。我认为网上可能有一个现有的模板，但他们怎么称呼它呢？

这是如何创建此类动画的基本想法检查以下片段：

如果您想扩展此动画，只需在数组中添加字母

$（函数（）{
var arr=['t'，'te'，'tex'，'text'，'G'，'Go'，'Goo'，'Goog'，'Googl'，'Googl'，'Googl'，'Google']；
var elem=$（'ani'）；
var i=0；
var循环=函数（）{
元素文本（arr[i++]）；
如果（i>arr.length）{
//clearInterval（intervalID）；
i=0；
}
}
var intervalID=设置间隔（循环，500）；
})

.test{
字号：26px；
颜色：绿色；
}
安尼先生{
颜色：红色；
}
阿尼：之后{
内容：“|”；
-webkit动画：光标闪烁0.8s线性无限；
-moz动画：光标闪烁0.8s线性无限；
-o动画：光标闪烁0.8s线性无限；
动画：光标闪烁0.8s线性无限；
}
@-moz关键帧光标闪烁{
1% {
不透明度：0；
}
40% {
不透明度：0；
}
60% {
不透明度：1；
}
100% {
不透明度：1；
}
}
@-webkit关键帧光标闪烁{
1% {
不透明度：0；
}
40% {
不透明度：0；
}
60% {
不透明度：1；
}
100% {
不透明度：1；
}
}
@-o关键帧光标闪烁{
1% {
不透明度：0；
}
40% {
不透明度：0；
}
60% {
不透明度：1；
}
100% {
不透明度：1；
}
}
@关键帧光标闪烁{
1% {
不透明度：0；
}
40% {
不透明度：0；
}
60% {
不透明度：1；
}
100% {
不透明度：1；
}
}

这是文本
谷歌

您方面的任何努力？？？？？抱歉，我不知道如何开始。如果该页面的背景是视频，它会工作吗？还有一件事，如果我想在显示数组中的所有文本后重新开始，我需要对.js代码段做些什么？当然可以。请参阅更新的答案，它将无限重复阵列。当我应用更新的代码并运行测试时，视频背景和阵列都停止响应。我在括号中有大约150个项目，当我减少阵列中项目的数量时，所有项目都再次运行。有没有办法解决这个问题？签入控制台可能会导致编译时错误。