CSS列表逐渐淡入未知数量

Question

我试图使用普通的CSS逐渐淡入淡出，并且在列表中没有jquery，因此它可以逐个淡入淡出。但是，我只知道如何在有限的列表中执行此操作。我如何循环css，所以无论我有多少列表它仍然有效。

这就是我所做的：

＆＃13;

＆＃13;

.ladder {
  opacity: 0;
  -webkit-animation: fadeIn 0.9s 1;
  animation: fadeIn 0.9s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.ladder:nth-child(5n+1) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.ladder:nth-child(5n+2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.ladder:nth-child(5n+3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.ladder:nth-child(5n+4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.ladder:nth-child(5n+5) {
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

＆＃13;

<li class="ladder">A</li>
<li class="ladder">B</li>
<li class="ladder">C</li>
<li class="ladder">D</li>
<li class="ladder">E</li>

＆＃13;

＆＃13;

＆＃13;

我的问题：无论有多少列表，如何使CSS工作。

Answer 1

这是一个使用CSS变量的想法，允许您减少代码。它不是通用的，但是为每个li添加简单的内联CSS比编写复杂的CSS更容易：

＆＃13;

＆＃13;

.ladder {
  opacity: 0;
  animation: fadeIn 1s var(--d) forwards;
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

＆＃13;

<ul>
  <li style="--d:0s" class="ladder">A</li>
  <li style="--d:0.2s" class="ladder">B</li>
  <li style="--d:0.4s" class="ladder">C</li>
  <li style="--d:0.6s" class="ladder">D</li>
  <li style="--d:0.8s" class="ladder">E</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这是另一个想法，你可以在ul：

上应用动画

＆＃13;

＆＃13;

ul {
  position:relative;
}
ul:before {
  content:"";
  position:absolute;
  top:-20px;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(to bottom,transparent,#fff 20px);
  animation:fadeIn 2s forwards
}

@keyframes fadeIn {
  0% {
    top:-10px;
  }
  100% {
    top: 100%;
  }
}

＆＃13;

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

＆＃13;

＆＃13;

＆＃13;