Javascript 循环脚本

（由于堆栈代码段已关闭，我添加了JSFIDLE）：

我想把纸条修好，结果弄砸了头。我有以下简单的javascript：

$（文档）.ready（函数（）{
showMessage（）；
setInterval（函数（）{
$（“.msg content”）.empty（）；
showMessage（）；
}, 7000);
})

：根目录{
--味精含量高度：26.75em；
--味精间距：1米；
--msg1高度：5.5em；
--msg2高度：4em；
--msg3高度：2.5em；
--msg4高度：2.5em；
--msg5高度：4em；
--msg6高度：3.25em；
}
.msg发送{
位置：绝对位置；
动画迭代次数：1；
动画持续时间：8秒；
动画填充模式：正向；
}
.msg接收{
位置：绝对位置；
动画迭代次数：1；
动画持续时间：8秒；
背景色：#2d67ff；
颜色：#ffffff；
动画填充模式：正向；
}
.msg容器{
宽度：28em；
}
.味精含量{
高度：var（--味精含量高度）；
}
/*动画名称*/
#msg1{
动画名称：msg1；
}
#msg2{
动画名称：msg2；
}
#msg3{
动画名称：msg3；
}
#msg4{
动画名称：msg4；
}
#msg5{
动画名称：msg5；
}
#msg6{
动画名称：msg6；
}
/*关键帧*/
@关键帧msg1{
0% {
顶部：计算值（var（--msg含量高度）-var（--msg1高度））；
左：-4em；
变换：比例（0）；
}
5% {
顶部：计算值（var（--msg含量高度）-var（--msg1高度））；
左：0；
变换：比例（1）；
}
12% {
顶部：计算值（var（--msg含量高度）-var（--msg1高度））；
}
17% {
顶部：计算值（var（-msg含量高度）-var（-msg1高度）-var（-msg间距）-var（-msg2高度））；
}
30% {
顶部：计算值（var（-msg含量高度）-var（-msg1高度）-var（-msg间距）-var（-msg2高度））；
}
35% {
顶部：计算值（var（--味精含量高度）-var（--msg1高度）-var（--味精间隔）-var（--msg2高度）-var（--味精间隔）-var（--msg3高度））；
}
49% {
顶部：计算值（var（--味精含量高度）-var（--msg1高度）-var（--味精间隔）-var（--msg2高度）-var（--味精间隔）-var（--msg3高度））；
}
54% {
顶部：计算值（var（--味精含量高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度））；
}
70% {
顶部：计算值（var（--味精含量高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度））；
}
75% {
顶部：计算器（var（--味精含量高度）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-msg5高度）；
}
95% {
顶部：计算器（var（--味精含量高度）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-msg5高度）；
}
100% {
排名：0；
左：0；
}
}
@关键帧msg2{
0% {
顶部：计算值（var（--msg含量高度）-var（--msg2高度））；
右：0；
变换：比例（0）；
不透明度：0；
}
12% {
顶部：计算值（var（--msg含量高度）-var（--msg2高度））；
右：-4em；
变换：比例（0）；
}
17% {
顶部：计算值（var（--msg含量高度）-var（--msg2高度））；
右：0；
变换：比例（1）；
不透明度：1；
}
30% {
顶部：计算值（var（--msg含量高度）-var（--msg2高度））；
}
35% {
顶部：计算值（var（-msg含量高度）-var（-msg2高度）-var（-msg间距）-var（-msg3高度））；
}
49% {
顶部：计算值（var（-msg含量高度）-var（-msg2高度）-var（-msg间距）-var（-msg3高度））；
}
54% {
顶部：计算值（var（--msg内容高度）-var（--msg2高度）-var（--msg间距）-var（--msg3高度）-var（--msg间距）-var（--msg4高度）；
}
70% {
顶部：计算值（var（--msg内容高度）-var（--msg2高度）-var（--msg间距）-var（--msg3高度）-var（--msg间距）-var（--msg4高度）；
}
75% {
顶部：计算值（var（--味精含量高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度））；
右：0；
}
95% {
顶部：计算值（var（--味精含量高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度）-var（--味精间隔高度））；
}
100% {
顶部：计算值（var（--味精含量高度）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-var（--味精间距）-msg6高度）；
右：0；
}
}
@关键帧msg3{
0% {
顶部：计算值（var（--msg含量高度）-var（--msg3高度））；
左：-4em；
不透明度：0；
变换：比例（0）；
}
30% {
顶部：计算值（var（--msg含量高度）-var（--msg3高度））；
不透明度：0；
变换：比例（0）；
}
35% {
顶部：计算值（var（--msg含量高度）-var（--msg3高度））；
左：0；
变换：比例（1）；
不透明度：1；
}
49% {
顶部：计算值（var（--msg含量高度）-var（--msg3高度））；
}
54% {
顶部：计算值（var（-msg含量高度）-var（-msg3高度）-var（-msg间距）-var（-msg4高度））；
}
70% {
顶部：计算值（var（-msg含量高度）-var（-msg3高度）-var（-msg间距）-var（-msg4高度））；
}
75% {
顶部：计算值（var（--味精含量高度）-var（--msg3高度）-var（--味精间距）-var（--msg4高度）-var（--味精间距）-var（--msg5高度））；
左：0；
}
95% {
顶部：计算值（var（--味精含量高度）-var（--msg3高度）-var（--味精间距）-var（--msg4高度）-var（--味精间距）-var（--msg5高度））；
}
100% {
顶部：计算值（var（--msg5高度）-var（--msg3高度）-var（--msg4高度）-var（--msg4高度）-var（--msg5高度）-var（--msg6高度）-var（--msg6高度）；
左：0；
}
}
@关键帧msg4{
0% {
顶部：计算值（变量（--味精含量高度）-