CSS animated Stripes issue

I have 2 code snippets down below. In the first, I have beautiful stripes, they resizing themselves with the window size and are always centered (I try some animation but I don't get it like the animation from snippet 2)

But I need an animation, this animation are showed in the second snippet, the stripes should come from below and go up and I would like to keep that in the final result.

So I need a fusion with the first and second snippet.

First:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  #position: fixed;
}

.mask {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.container {
  height: 100%;
  margin: 0 -100vh;
  #position: absolute;
}

.stripe {
  float: left;
  height: 100%;
  width: 2%;
  margin: 0 1%;
  bottom: 0%;
  max-height: 0%;
  #position: absolute;
  background-color: black;
  transform: skew(-20deg);
  #transform-origin: bottom bottom;
  #transform-origin: left bottom;
  animation: ani 1s linear 1 forwards;
}

.stripe:nth-child(1) {
  animation-delay: 0.0s;
}

.stripe:nth-child(2) {
  animation-delay: 0.2s;
}

.stripe:nth-child(3) {
  animation-delay: 0.4s;
}

.stripe:nth-child(4) {
  animation-delay: 0.6s;
}

.stripe:nth-child(5) {
  animation-delay: 0.8s;
}

.stripe:nth-child(6) {
  animation-delay: 1s;
}

.stripe:nth-child(7) {
  animation-delay: 1.2s;
}

.stripe:nth-child(8) {
  animation-delay: 1.4s;
}

.stripe:nth-child(9) {
  animation-delay: 1.6s;
}

.stripe:nth-child(10) {
  animation-delay: 1.8s;
}

.stripe:nth-child(11) {
  animation-delay: 2s;
}

.stripe:nth-child(12) {
  animation-delay: 2.2s;
}

.stripe:nth-child(13) {
  animation-delay: 2.4s;
}

.stripe:nth-child(14) {
  animation-delay: 2.6s;
}

.stripe:nth-child(15) {
  animation-delay: 2.8s;
}

.stripe:nth-child(16) {
  animation-delay: 3s;
}

.stripe:nth-child(17) {
  animation-delay: 3.2s;
}

.stripe:nth-child(18) {
  animation-delay: 3.4s;
}

.stripe:nth-child(19) {
  animation-delay: 3.6s;
}

.stripe:nth-child(20) {
  animation-delay: 3.8s;
}

.stripe:nth-child(21) {
  animation-delay: 4s;
}

.stripe:nth-child(22) {
  animation-delay: 4.2s;
}

.stripe:nth-child(23) {
  animation-delay: 4.4s;
}

.stripe:nth-child(24) {
  animation-delay: 4.6s;
}

.stripe:nth-child(25) {
  animation-delay: 4.8s;
}

@keyframes ani {
  0% {
    max-height: 0%;
  }
  100% {
    max-height: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="mask">
    <div class="container">
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
    </div>
  </div>
</body>

</html>

Second:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
}

.stripe {
  height: 100%;
  width: 2%;
  bottom: 0%;
  max-height: 0%;
  background-color: black;
  position: fixed;
  animation: ani 1s linear 1 forwards;
  transform: skew(-10deg);
  transform-origin: left bottom;
}

.stripe:nth-child(1) {
  margin-left: 0%;
  animation-delay: 0.0s;
}

.stripe:nth-child(2) {
  margin-left: 4%;
  animation-delay: 0.2s;
}

.stripe:nth-child(3) {
  margin-left: 8%;
  animation-delay: 0.4s;
}

.stripe:nth-child(4) {
  margin-left: 12%;
  animation-delay: 0.6s;
}

.stripe:nth-child(5) {
  margin-left: 16%;
  animation-delay: 0.8s;
}

.stripe:nth-child(6) {
  margin-left: 20%;
  animation-delay: 1s;
}

.stripe:nth-child(7) {
  margin-left: 24%;
  animation-delay: 1.2s;
}

.stripe:nth-child(8) {
  margin-left: 28%;
  animation-delay: 1.4s;
}

.stripe:nth-child(9) {
  margin-left: 32%;
  animation-delay: 1.6s;
}

.stripe:nth-child(10) {
  margin-left: 36%;
  animation-delay: 1.8s;
}

.stripe:nth-child(11) {
  margin-left: 40%;
  animation-delay: 2s;
}

.stripe:nth-child(12) {
  margin-left: 44%;
  animation-delay: 2.2s;
}

.stripe:nth-child(13) {
  margin-left: 48%;
  animation-delay: 2.4s;
}

.stripe:nth-child(14) {
  margin-left: 52%;
  animation-delay: 2.6s;
}

.stripe:nth-child(15) {
  margin-left: 56%;
  animation-delay: 2.8s;
}

.stripe:nth-child(16) {
  margin-left: 60%;
  animation-delay: 3s;
}

.stripe:nth-child(17) {
  margin-left: 64%;
  animation-delay: 3.2s;
}

.stripe:nth-child(18) {
  margin-left: 68%;
  animation-delay: 3.4s;
}

.stripe:nth-child(19) {
  margin-left: 72%;
  animation-delay: 3.6s;
}

.stripe:nth-child(20) {
  margin-left: 76%;
  animation-delay: 3.8s;
}

.stripe:nth-child(21) {
  margin-left: 80%;
  animation-delay: 4s;
}

.stripe:nth-child(22) {
  margin-left: 84%;
  animation-delay: 4.2s;
}

.stripe:nth-child(23) {
  margin-left: 88%;
  animation-delay: 4.4s;
}

.stripe:nth-child(24) {
  margin-left: 92%;
  animation-delay: 4.6s;
}

.stripe:nth-child(25) {
  margin-left: 96%;
  animation-delay: 4.8s;
}

@keyframes ani {
  0% {
    max-height: 0%;
  }
  100% {
    max-height: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="mask">
    <div class="container">
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
    </div>
  </div>
</body>

</html>

Thanks for your help!

I have changed a little bit your layout.

But the main difference is to get the animation effect from a background made of a gradient, and moving this one. It's much easier to handle the stripes position this way:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.mask {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.container {
  height: 100%;
  margin-right: -100vh;
}

.stripe {
  display: inline-block;
  height: 100%;
  width: 2%;
  margin: 0 1%;
  bottom: 0%;
  transform: skew(-20deg);
  transform-origin: top;
      background-image: linear-gradient(to top, black 50%, transparent 50%);
    background-size: 100% 200%;
    animation: ani 1s forwards;
}

.stripe:nth-child(1) {
  animation-delay: 0.0s;
}

.stripe:nth-child(2) {
  animation-delay: 0.2s;
}

.stripe:nth-child(3) {
  animation-delay: 0.4s;
}

.stripe:nth-child(4) {
  animation-delay: 0.6s;
}

.stripe:nth-child(5) {
  animation-delay: 0.8s;
}

.stripe:nth-child(6) {
  animation-delay: 1s;
}

.stripe:nth-child(7) {
  animation-delay: 1.2s;
}

.stripe:nth-child(8) {
  animation-delay: 1.4s;
}

.stripe:nth-child(9) {
  animation-delay: 1.6s;
}

.stripe:nth-child(10) {
  animation-delay: 1.8s;
}

.stripe:nth-child(11) {
  animation-delay: 2s;
}

.stripe:nth-child(12) {
  animation-delay: 2.2s;
}

.stripe:nth-child(13) {
  animation-delay: 2.4s;
}

.stripe:nth-child(14) {
  animation-delay: 2.6s;
}

.stripe:nth-child(15) {
  animation-delay: 2.8s;
}

.stripe:nth-child(16) {
  animation-delay: 3s;
}

.stripe:nth-child(17) {
  animation-delay: 3.2s;
}

.stripe:nth-child(18) {
  animation-delay: 3.4s;
}

.stripe:nth-child(19) {
  animation-delay: 3.6s;
}

.stripe:nth-child(20) {
  animation-delay: 3.8s;
}

.stripe:nth-child(21) {
  animation-delay: 4s;
}

.stripe:nth-child(22) {
  animation-delay: 4.2s;
}

.stripe:nth-child(23) {
  animation-delay: 4.4s;
}

.stripe:nth-child(24) {
  animation-delay: 4.6s;
}

.stripe:nth-child(25) {
  animation-delay: 4.8s;
}

@keyframes ani {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="mask">
    <div class="container">
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
    </div>
  </div>
</body>

</html>