无法通过过渡淡入淡出来获得正确的时间

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>

请参阅此代码笔：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>

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