Html CSS动画条纹问题

下面我有两段代码。 在第一个例子中，我有漂亮的条纹，它们随着窗口大小调整大小，并且总是居中（我尝试了一些动画，但我没有得到像片段2中的动画那样的效果）

但是我需要一个动画，这个动画显示在第二个片段中，条纹应该从下往上，我想在最后的结果中保留它

所以我需要与第一个和第二个片段进行融合

第一：

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
#位置：固定；
}
.面具{
身高：100%；
溢出：隐藏；
位置：相对位置；
}
.集装箱{
身高：100%；
裕度：0-100vh；
#位置：绝对位置；
}
.条纹{
浮动：左；
身高：100%；
宽度：2%；
利润率：0.1%；
底部：0%；
最大高度：0%；
#位置：绝对位置；
背景色：黑色；
变换：倾斜（-20度）；
#变换原点：底部；
#变换原点：左下角；
动画：ani 1s线性1向前；
}
.条纹：第n个孩子（1）{
动画延迟：0.0s；
}
.条纹：第n个孩子（2）{
动画延迟：0.2s；
}
.条纹：第n个孩子（3）{
动画延迟：0.4s；
}
.条纹：第n个孩子（4）{
动画延迟：0.6s；
}
.条纹：第n个孩子（5）{
动画延迟：0.8s；
}
.条纹：第n个孩子（6）{
动画延迟：1s；
}
.条纹：第n个孩子（7）{
动画延迟：1.2s；
}
.条纹：第n个孩子（8）{
动画延迟：1.4s；
}
.条纹：第n个孩子（9）{
动画延迟：1.6s；
}
.条纹：第n个孩子（10）{
动画延迟：1.8s；
}
.条纹：第n个孩子（11）{
动画延迟：2s；
}
.条纹：第n个孩子（12）{
动画延迟：2.2s；
}
.条纹：第n个孩子（13）{
动画延迟：2.4s；
}
.条纹：第n个孩子（14）{
动画延迟：2.6s；
}
.条纹：第n个孩子（15）{
动画延迟：2.8秒；
}
.条纹：第n个孩子（16）{
动画延迟：3s；
}
.条纹：第n个孩子（17）{
动画延迟：3.2s；
}
.条纹：第n个孩子（18）{
动画延迟：3.4s；
}
.条纹：第n个孩子（19）{
动画延迟：3.6s；
}
.条纹：第n个孩子（20）{
动画延迟：3.8秒；
}
.条纹：第n个孩子（21）{
动画延迟：4s；
}
.条纹：第n个孩子（22）{
动画延迟：4.2s；
}
.条纹：第n个孩子（23）{
动画延迟：4.4s；
}
.条纹：第n个孩子（24）{
动画延迟：4.6s；
}
.条纹：第n个孩子（25）{
动画延迟：4.8秒；
}
@关键帧ani{
0% {
最大高度：0%；
}
100% {
最大高度：100%；
}
}

---

我对您的布局做了一点修改

但是主要的区别是从渐变的背景中获得动画效果，并移动这个背景。这样更容易处理条纹位置：

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.面具{
身高：100%；
溢出：隐藏；
位置：相对位置；
}
.集装箱{
身高：100%；
右边距：-100vh；
}
.条纹{
显示：内联块；
身高：100%；
宽度：2%；
利润率：0.1%；
底部：0%；
变换：倾斜（-20度）；
变换原点：顶部；
背景图像：线性渐变（至顶部，黑色50%，透明50%）；
背景大小：100%200%；
动画：ani 1s向前；
}
.条纹：第n个孩子（1）{
动画延迟：0.0s；
}
.条纹：第n个孩子（2）{
动画延迟：0.2s；
}
.条纹：第n个孩子（3）{
动画延迟：0.4s；
}
.条纹：第n个孩子（4）{
动画延迟：0.6s；
}
.条纹：第n个孩子（5）{
动画延迟：0.8s；
}
.条纹：第n个孩子（6）{
动画延迟：1s；
}
.条纹：第n个孩子（7）{
动画延迟：1.2s；
}
.条纹：第n个孩子（8）{
动画延迟：1.4s；
}
.条纹：第n个孩子（9）{
动画延迟：1.6s；
}
.条纹：第n个孩子（10）{
动画延迟：1.8s；
}
.条纹：第n个孩子（11）{
动画延迟：2s；
}
.条纹：第n个孩子（12）{
动画延迟：2.2s；
}
.条纹：第n个孩子（13）{
动画延迟：2.4s；
}
.条纹：第n个孩子（14）{
动画延迟：2.6s；
}
.条纹：第n个孩子（15）{
动画延迟：2.8秒；
}
.条纹：第n个孩子（16）{
动画延迟：3s；
}
.条纹：第n个孩子（17）{
动画延迟：3.2s；
}
.条纹：第n个孩子（18）{
动画延迟：3.4s；
}
.条纹：第n个孩子（19）{
动画延迟：3.6s；
}
.条纹：第n个孩子（20）{
动画延迟：3.8秒；
}
.条纹：第n个孩子（21）{
动画延迟：4s；
}
.条纹：第n个孩子（22）{
动画延迟：4.2s；
}
.条纹：第n个孩子（23）{
动画延迟：4.4s；
}
.条纹：第n个孩子（24）{
动画延迟：4.6s；
}
.条纹：第n个孩子（25）{
动画延迟：4.8秒；
}
@关键帧ani{
0% {
背景位置：100%0%；
}
100% {
背景位置：100%100%；
}
}