如何淡出一个 div，然后在同一位置淡入另一个。仅 CSS答案

【问题标题】：How to fade out a div, then fade in another in the same location. CSS only如何淡出一个 div，然后在同一位置淡入另一个。仅 CSS
【发布时间】：2020-04-08 02:49:57
【问题描述】：

我正在尝试将一个 div 淡出，然后将另一个 div 淡入以在它完全淡化后仅使用 CSS 来替换它。然而，一旦它们淡出，两个 div 似乎仍然保留在页面上的空间。我似乎可以摆脱他们的空间的唯一方法是使用display: none;，但这不是动画。目前，我正在使用 CSS 动画来改变元素的不透明度，例如：

.first {
  animation: fadeOut 8s ease;
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

Here is a fiddle with what I have so far. 如您所见，下面的 3 列淡入，而不是淡出按钮的位置。
对于更多的上下文，我有 3 列，垂直居中，除了它们堆叠的移动设备。页面加载时显示的按钮应垂直和水平居中。
提前致谢

【问题讨论】：

我希望当人们对问题进行评分时，他们会提出自己的理由。可以给提问者一个线索。没有？
我没有投反对票，但是，大多数时候是因为问题（例如这个问题）不包含 Stack Overflow 指南所要求的最小示例。 CSS 还远远不够。问题指出还有其他代码，但链接到小提琴。该代码本身应该是有问题的，而不是另一个场外资源。
@disinfor 谢谢你的解释。我希望 OP 遵循指导方针。有时我们只是不阅读所有规则。我不敢在这里问问题，因为有些人几乎全职在 stackoverflow 上闲逛，并且非常清楚不足之处。但也有那些，虽然问题是模棱两可的，但他们可能会抓住潜在的问题，并且可以找出他们以前使用的代码。单独问题的辩论;)
@Mugé 没问题。它甚至没有真正阅读所有规则。有一个非常好的帮助部分，它很短，但很透彻。 stackoverflow.com/help你永远不要害怕在这里提问！这是我喜欢遵循的基本准则：如果有人向您寻求帮助，他们需要提供给您回答的最少信息是什么？这是提问时最好的起点。像这样的问题（如目前所写）就像走进一家汽车店说“我的车发出噪音”然后走出去，没有提供其他信息。

标签： html css css-animations

【解决方案1】：

对两个 DIV 使用 position: absolute 以允许它们位于同一位置。（以及position: relative 用于父 DIV 使其充当位置锚点）

【讨论】：