Html 在渐变淡入淡出时无法正确计时

我似乎无法正确把握我的过渡时间：

我希望每个项目都很好地淡入，然后保持可见5秒钟，然后很好地淡出到下一个项目，并重复。在一个工作的无限循环上

@关键帧淡入淡出{ 0%{不透明度：0；}， 6%{不透明度：1；}， 34%{不透明度：1；}， 40%{不透明度：0；} } @-webkit关键帧淡出{ 50%{不透明度：1；} } @关键帧淡入淡出{ 50%{不透明度：1；} } e{ 不透明度：0； 位置：绝对位置； } .一{ 背景：红色； 动画：法迪诺特3s无限1s； } .二{ 背景：绿色； 动画：fadeinout 3s无限2s； } .三{ 背景：黄色； 动画：法迪诺特3s无限3s； } 项目一 项目二 项目三

---

首先在关键帧中包括停留模式，使元素保持可见5秒，然后为每个动画添加5秒的延迟，为什么应用动画属性

e{ 不透明度：0； 位置：绝对位置； } @关键帧淡入淡出{ 0%，40%{不透明度：0；} 6%，34%{不透明度：1；}/*保持模式*/ } .一{ 背景：红色； 动画：法迪诺特15秒无限1秒； } .二{ 背景：绿色； 动画：fadeinout 15s无限6s；/*偏移*/ } .三{ 背景：黄色； 动画：fadeinout 15s无限11s；/*偏移*/ } 项目一 项目二 项目三

---

你也可以对关键帧中的多个百分比使用一个不透明度值，比如6%，34%{opacity:1；}我尝试过将你的建议添加到代码笔中，但它似乎仍然是一样的，闪烁得非常快？你尝试过我答案下的代码片段按钮吗？这不是你想要的吗？我们需要在问题本身中看到一个。@TylerH我试图提交一个编辑，但到目前为止它被拒绝了，尽管我几乎是从代码笔中复制代码的'\_ツ_/“@GammaGames这可能是因为从JSFIDLE或CodePen复制其他人的代码通常是违反许可证的行为，JSFIDLE或CodePen不提供有关堆栈溢出的许可证指导，如果您同意的话，堆栈溢出将在SA 3.0或4.0的CC下许可代码。但是，在许多情况下，代码不足以获得许可，因此并非每次都是明确的。@GammaGames同样，您应该始终在帖子中保留指向外部代码沙盒的链接；不要因为代码现在有问题就删除它。有些人确实发现跳入JSFIDLE或CodePen来处理OP的代码更容易。强烈建议查看此演示文稿。作者创建了一个mixin来自动进行这种关键帧数学运算。