Javascript 如何为内联元素创建垂直jQuery或CSS滑块

所以基本上，我在CodePen（）上看到了这个非常酷的CSS动画，我一直在尝试复制它，以便它能为我工作。我能够相当容易地用CSS复制括号中的动画，但我完全不知道如何像他们那样在更改文本之间进行转换。我想复制新文本滑入可见内联视图框架然后滑出的方式

我更喜欢如果这有一个CSS唯一的解决方案，但在这一点上，我会采取任何措施

这是我目前掌握的代码

var-users=[“鲍勃”、“约翰”、“世界”、“每个人”]；
计数器=0；
setInterval（函数（）{
//从屏幕上滑下
//更改值
如果（计数器>=（users.length-1））{
elUser.textContent=用户[计数器]；
计数器=0；
}否则{
elUser.textContent=用户[计数器]；
计数器+=1
}
//重置到顶部
$（“#用户”）。设置动画({
底部：'-=120'
});
//在屏幕上向下滑动
}, 2000);
@关键帧和括号{
0% {
颜色：rgba（242,12,54,0）；
}
50% {
颜色：rgba（242,12,54,1）；
}
100% {
颜色：rgba（242,12,54,0）；
}
}
#使用者{
显示：内联；
溢出：隐藏；
}
.括号{
动画：Welcome2s；
动画迭代次数：无限；
颜色：#2603c1；
}
[欢迎用户使用]
]
您没有调用正确的id。请将您的Div id更改为elUser，它将正常工作


var-users=[“鲍勃”、“约翰”、“世界”、“每个人”]；
计数器=0；
setInterval（函数（）{
//从屏幕上滑下
//更改值
如果（计数器>=（users.length-1））{
elUser.textContent=用户[计数器]；
计数器=0；
}否则{
elUser.textContent=用户[计数器]；
计数器+=1
}
//重置到顶部
$（“#用户”）。设置动画({
底部：'-=120'
});
//在屏幕上向下滑动
}, 2000);
@关键帧和括号{
0% {
颜色：rgba（242,12,54,0）；
}
50% {
颜色：rgba（242,12,54,1）；
}
100% {
颜色：rgba（242,12,54,0）；
}
}
#使用者{
显示：内联；
溢出：隐藏；
}
.括号{
动画：Welcome2s；
动画迭代次数：无限；
颜色：#2603c1；
}

[欢迎用户]
]