CSS动画通过ul项目答案

【问题标题】：CSS animate through ul itemsCSS动画通过ul项目
【发布时间】：2021-11-30 21:39:36
【问题描述】：

我有一个无序列表，我想逐个循环遍历每个列表项。目前我有一个半可行的解决方案，但如果你仔细观察，你会发现它何时到达“第 4 项”，它开始与“第 1 项”并且不一致。

@keyframes fadein {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

li {
  list-style: none;
  padding: 0;
  font-size: 40px;
  position: absolute;
  width: 100%;
  opacity: 0;
}

li:nth-of-type(1) {
  animation: fadein 6s ease-in-out -4s infinite alternate;
}

li:nth-of-type(2) {
  animation: fadein 6s ease-in-out 0s infinite alternate;
}

li:nth-of-type(3) {
  animation: fadein 6s ease-in-out 4s infinite alternate;
}

li:nth-of-type(4) {
  animation: fadein 6s ease-in-out 8s infinite alternate;
}

<ul class="usp__list">
  <li class="usp__item">
    Item 1
  </li>
  <li class="usp__item">
    Item 2
  </li>
  <li class="usp__item">
    Item 3
  </li>
  <li class="usp__item">
    Item 4
  </li>
</ul>

任何有助于解决这个问题的方法都会很棒。我认为这与延迟有关，但在尝试了许多变化后，我仍然遇到了这个潜在的问题。

小提琴 - https://jsfiddle.net/15c4rd8v/

【问题讨论】：

标签： css animation

【解决方案1】：

您的animation-duration 太短。您的animation-delay 最多为8s，但持续时间仅为6s - 因此2s 重叠。如果您将持续时间设置为8s 并将关键帧动画从...66% {...} 76%... 更改为75% {...} 80%...，则可以。

@keyframes fadein {
  0% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

li {
  list-style: none;
  padding: 0;
  font-size: 40px;
  position: absolute;
  width: 100%;
  opacity: 0;
}

li:nth-of-type(1) {
  animation: fadein 8s ease-in-out -4s infinite alternate;
}

li:nth-of-type(2) {
  animation: fadein 8s ease-in-out 0s infinite alternate;
}

li:nth-of-type(3) {
  animation: fadein 8s ease-in-out 4s infinite alternate;
}

li:nth-of-type(4) {
  animation: fadein 8s ease-in-out 8s infinite alternate;
}

<ul class="usp__list">
  <li class="usp__item">
    Item 1
  </li>
  <li class="usp__item">
    Item 2
  </li>
  <li class="usp__item">
    Item 3
  </li>
  <li class="usp__item">
    Item 4
  </li>
</ul>

【讨论】：