.anim {
  --article-anim-delay: 0.015s;
  --article-anim-duration: 0.1s;
  --wl-anim-delay: 0.015s;
  --wl-anim-duration: 0.1s;
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-100%) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.anim article.rolldown > * {
  opacity: 0;
  animation: fadeInDown var(--article-anim-duration) ease forwards;
  animation-delay: calc(var(--index, 20) * var(--article-anim-delay));
}
.anim article.rolldown > *:nth-child(1) { --index: 0 }
.anim article.rolldown > *:nth-child(2) { --index: 1 }
.anim article.rolldown > *:nth-child(3) { --index: 2 }
.anim article.rolldown > *:nth-child(4) { --index: 3 }
.anim article.rolldown > *:nth-child(5) { --index: 4 }
.anim article.rolldown > *:nth-child(6) { --index: 5 }
.anim article.rolldown > *:nth-child(7) { --index: 6 }
.anim article.rolldown > *:nth-child(8) { --index: 7 }
.anim article.rolldown > *:nth-child(9) { --index: 8 }
.anim article.rolldown > *:nth-child(10) { --index: 9 }
.anim article.rolldown > *:nth-child(11) { --index: 10 }
.anim article.rolldown > *:nth-child(12) { --index: 11 }
.anim article.rolldown > *:nth-child(13) { --index: 12 }
.anim article.rolldown > *:nth-child(14) { --index: 13 }
.anim article.rolldown > *:nth-child(15) { --index: 14 }
.anim article.rolldown > *:nth-child(16) { --index: 15 }
.anim article.rolldown > *:nth-child(17) { --index: 16 }
.anim article.rolldown > *:nth-child(18) { --index: 17 }
.anim article.rolldown > *:nth-child(19) { --index: 18 }
.anim article.rolldown > *:nth-child(20) { --index: 19 }


.anim table.walllist tr {
  opacity: 0;
  animation: fadeInDown var(--wl-anim-duration) ease forwards;
  animation-delay: calc(var(--index, 0) * var(--wl-anim-delay));
}