html - 过渡淡入淡出时无法获得正确的时间

Question

我似乎无法准确把握转换时间:

我希望每个元素都很好地淡入，然后保持可见 5 秒，然后很好地淡出到下一个元素，然后重复。并在无限循环中(正在运行)

@keyframes fadeinout {
  0% { opacity: 0; },
  6% { opacity: 1; },
  34% { opacity: 1; },
  40% { opacity: 0; }
}

@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}

@keyframes fadeinout {
  50% { opacity: 1; }
}

.e {
  opacity: 0;
  position: absolute;
}

.one {
  background: red;
  animation: fadeinout 3s infinite 1s;
}

.two {
  background: green;
  animation: fadeinout 3s infinite 2s;
}

.three {
  background: yellow;
  animation: fadeinout 3s infinite 3s;
}

<ul class="my-list">
  <li class="e one">item one</li>
  <li class="e two">item two</li>
  <li class="e three">item three</li>
</ul>

请参阅此 CodePen:https://codepen.io/pbul2004/pen/zYOjzRa

Answer 1

首先在关键帧中包含“停留”模式，使元素保持可见 5 秒，其次为每个动画添加 5 秒的延迟，为什么要应用动画属性。

.e {
  opacity: 0;
  position: absolute;
}

@keyframes fadeinout {
  0%, 40% { opacity: 0; }
  6%, 34% { opacity: 1; }  /* "stay" mode */ 
}
.one {
  background:red;
  animation: fadeinout 15s infinite 1s;
}
.two {
  background:green;
  animation: fadeinout 15s infinite 6s; /* Offset */
}
.three {
  background:yellow;
  animation: fadeinout 15s infinite 11s; /* Offset */
}

<ul class="my-list">
  <li class="e one">item one</li>
  <li class="e two">item two</li>
  <li class="e three">item three</li>
</ul>

每个元素的可见模式将在其他两个元素的隐藏模式期间出现。一旦理解了这个想法，您就可以微调持续时间和延迟 :)(例如，我故意重叠淡入淡出)