交叉褪色的两个元素，以创建一个循环的动画没有js

Question

我想给一个元素添加动画，让它在" 0%无息信贷"之间循环和"免费交付"，我试图实现这一点没有javascript，但我只能让第一个元素淡出，而不是让第二个元素淡出。

.parent {
position: relative;
}
.parent p {
position: absolute;
top: 0;
left: 0;
}
.parent p:first-child {
animation: hide 2s ease-in
}
.parent p:last-child {
opacity: 0;
animation: show 2s ease-in animation-delay:2s;
}
@keyframes show {
to {
opacity: 1;
}
}
@keyframes hide {
to {
opacity: 0;
}
}

<div class="parent">
<p>0% interest free credit</p>
<p>free delivery</p>
</div>

我做错了什么?我希望我在另一个淡出时淡出，并让它无休止地循环。

Answer 1

首先，您需要确保您的动画设置为循环。使用关键字infinite作为动画计时函数。

第二，我们可以重组你的动画发生在一个可重用的关键帧序列，显示和隐藏元素。通过将整个动画设置为4秒长，并在一个元素上将其抵消一半(2秒)，我们实现了两个元素淡出的无缝循环:

.parent {
position: relative;
}
.parent p {
animation: show 4s infinite;
position: absolute;
top: 0;
left: 0;
}
.parent p:last-child {
animation-delay: -2s;
}
@keyframes show {
0%, 50%, 100% {
opacity: 0;
}

10%, 40% {
opacity: 1;
}
}

<div class="parent">
<p>0% interest free credit</p>
<p>free delivery</p>
</div>