Html 交叉淡入淡出2个元素以创建无js的循环动画

我想给一个元素设置动画，使其在“0%免息信用”和“免费交付”之间循环，我试图在没有javascript的情况下实现这一点，但我只能让第一个元素淡入，而不能让第二个元素淡入

.parent{
位置：相对位置；
}
.家长{
位置：绝对位置；
排名：0；
左：0；
}
.家长p：第一个孩子{
动画：隐藏2秒轻松进入
}
.家长p：最后一个孩子{
不透明度：0；
动画：显示2秒动画延迟：2秒；
}
@关键帧显示{
到{
不透明度：1；
}
}
@关键帧隐藏{
到{
不透明度：0；
}
}

0%免息信贷

免费送货

首先，您需要确保动画设置为循环。使用关键字

infinite

作为您的答案

其次，我们可以重新构造动画，使其在一个可重用的关键帧序列中显示和隐藏元素。通过使整个动画长4秒，并在一个元素上将其偏移一半（2秒），我们实现了两个元素淡入淡出的无缝循环：

.parent{
位置：相对位置；
}
.家长{
动画：展示4s无限；
位置：绝对位置；
排名：0；
左：0；
}
.家长p：最后一个孩子{
动画延迟：-2s；
}
@关键帧显示{
0%, 50%, 100% {
不透明度：0；
}
10%, 40% {
不透明度：1；
}
}

0%免息信贷

免费送货

此处关键帧动画序列的快速解释-由于我们希望动画一半时间可见，另一半时间不可见，让我们将0%到50%视为可见，将50%到100%视为不可见。但是，我们也希望有一个平滑的淡入淡出过渡，所以我选择在“可见”一半的开始和结束时为淡入淡出留出额外的10%，因此关键帧的比例为10%和40%。