仅使用CSS隐藏一个元素并同时显示另一个元素?

Question

我发现了这个问题和相关的答案:CSS隐藏元素，5秒后显示它

然而，我试图隐藏元素a，同时显示元素b。

请查看我当前的代码:

#showthiscolumn {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
@keyframes cssAnimation {
to   { visibility: visible; }
}

#hidethiscolumn {
animation: cssAnimation 0s 5s forwards;
visibility: visible;
}
@keyframes cssAnimation {
to   { visibility: hidden; }
}

#hidethiscolumn元素工作，但#showthiscolumn内容从未出现。

Answer 1

你正在覆盖你的CSS动画。对不同的动画使用不同的动画名称。

#showthiscolumn {
animation: cssAnimation1 0s 2s forwards;
visibility: hidden;
}
@keyframes cssAnimation1 {
to   { visibility: visible; }
}

#hidethiscolumn {
animation: cssAnimation2 0s 2s forwards;
visibility: visible;
}
@keyframes cssAnimation2 {
to   { visibility: hidden; }
}

<div id="showthiscolumn" style="background: tomato; width: 1rem; height: 1rem;"></div>
<div id="hidethiscolumn" style="background: coral; width: 1rem; height: 1rem;"></div>