我想用CSS在两个不同的单词之间不断闪现.当第一个可见时，第二个不应可见，反之亦然.它们不应同时可见(因此不会淡入/淡出).
我试着调整here和here的答案.但是，这并不完全正确，因为这些词在很多时候是重叠的.
@keyframes blinker {
50% {
opacity: 0;
}
}
.mask{
position:absolute;
-webkit-animation: blinker 140ms infinite;
}
.target{
position:absolute;
-webkit-animation: blinker 240ms infinite;
}<p class="mask">MASK</p><p class="target">TARGET</p>使用动画延迟不起作用，因为它将延迟应用于第一次演示，而不是后续迭代.我在这里读了this page，但我发现很难适应两个单词.
此外，我不希望第一次演讲有任何延误.第一个单词has从一开始就可见.
下面是一个使用CSS网格和order动画的 idea .你所要做的就是调整关键帧的百分比和持续时间
.blinky {
display: grid;
grid-template-rows: 1fr 0; /* 2 rows with the second having 0 height */
overflow: hidden; /* hide the overflow of the second row*/
font-size: 3rem;
}
/* apply the animation to only the last element */
.blinky > span:last-child {
animation: blink 2s linear infinite;
}
@keyframes blink {
0%,
69% {order:0}
70%,
100% {order:-1}
}<div class="blinky">
<span>MASK</span>
<span>TARGET</span>
</div>