Javascript 如何在CSS和HTML中的另一个动画后面分层动画？

我正在努力弄清楚如何分层2个不同的动画。我想在移动的月亮动画和网站平铺后面制作闪烁的星星动画（这样背景基本上就是闪烁的星星和移动的月亮）。现在，它只是在月球动画和标题的顶部分层，完全覆盖它们，并且位置已关闭。我对HTML比较陌生，所以如果我的问题很明显，请原谅。短暂性脑缺血发作

@月球关键帧{
0% {
盒影：-150px 0px 0px 0px白色；
变换：旋转（-10度）；
}
50% {
盒影：0px 0px 0px 0px白色；
}
100% {
盒影：150px 0px 0px 0px白色；
变换：旋转（10度）；
}
z指数：-1；
位置：相对位置；
}
@关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-webkit关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-moz关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-ms关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
.明星们，
.闪烁{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
显示：块；
}
.明星{
背景：#000 url(http://www.script-tutorials.com/demos/360/images/stars.png)重复上止点；
z指数：-1；
}
.闪烁{
背景：透明url(http://www.script-tutorials.com/demos/360/images/twinkling.png)重复上止点；
z指数：0；
-moz动画：向后移动闪烁200秒线性无限；
-ms动画：向后移动闪烁200秒线性无限；
-o-动画：向后移动闪烁200s线性无限；
-webkit动画：向后移动闪烁200秒线性无限；
动画：向后移动闪烁200秒线性无限；
}
html{
z指数：-1；
位置：相对位置；
背景图像：线性梯度（80%黑色，#041931，#fff）；
背景重复：无重复；
身高：45%；
}
身体{
字体系列：“Manrope”，无衬线；
背景：无；
}
div{
背景：无；
z指数：1；
}
月亮先生{
z指数：-1；
位置：相对位置；
宽度：10雷姆；
高度：10雷姆；
背景：#0a0a；
保证金：1rem自动；
动画：月亮20秒线性无限交替；
边界半径：50%；
盒影：嵌入-10rem 0白烟；
变换：旋转（-10度）；
}

div{
利润率：10%；
}
欢迎来到我的网站！
这是动画下面的文本
setTimeout（函数（）{
$（'.moon'）.css（“动画播放状态”，“暂停”）；
}, 20000)

由于定位看起来不规则，您无需向所有元素添加

z-index

。我刚刚删除了其他部分的z索引，并将它们包括在相关部分中，即

月亮

、

星星

和

闪烁

我还必须删除div元素上的边距集。以全屏模式查看演示

@月球关键帧{
0% {
盒影：-150px 0px 0px 0px白色；
变换：旋转（-10度）；
}
50% {
盒影：0px 0px 0px 0px白色；
}
100% {
盒影：150px 0px 0px 0px白色；
变换：旋转（10度）；
}
位置：相对位置；
}
@关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-webkit关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-moz关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-ms关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
.明星们，
.闪烁{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
显示：块；
}
.明星{
背景：#000 url(http://www.script-tutorials.com/demos/360/images/stars.png)重复上止点；
z指数：-3；
}
.闪烁{
背景：透明url(http://www.script-tutorials.com/demos/360/images/twinkling.png)重复上止点；
-moz动画：向后移动闪烁200秒线性无限；
-ms动画：向后移动闪烁200秒线性无限；
-o-动画：向后移动闪烁200s线性无限；
-webkit动画：向后移动闪烁200秒线性无限；
动画：向后移动闪烁200秒线性无限；
z指数：-2；
}
html，正文{
字体系列：“Manrope”，无衬线；
身高：100%；
}
月亮先生{
位置：相对位置；
宽度：10雷姆；
高度：10雷姆；
背景：#0a0a；
保证金：1rem自动；
动画：月亮20秒线性无限交替；
边界半径：50%；
盒影：嵌入-10rem 0白烟；
变换：旋转（-10度）；
z指数：-1；
}
#text.maintext{color:white；text align:center；margin top:25px；}

欢迎来到我的网站！
这是动画下面的文本
setTimeout（函数（）{
$（'.moon'）.css（“动画播放状态”，“暂停”）；
}, 20000)

此z索引和css调整将解决您的问题。

@月球关键帧{
0% {
盒影：-150px 0px 0px 0px白色；
变换：旋转（-10度）；
}
50% {
盒影：0px 0px 0px 0px白色；
}
100% {
盒影：150px 0px 0px 0px白色；
变换：旋转（10度）；
}
z指数：-1；
位置：相对位置；
}
@关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-webkit关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}
@-moz关键帧向后移动闪烁{
从{
背景位置：0；
}
到{
背景位置：-10000px