时间戳

首页 > 解决方案 > 如何淡出一个 div，然后在同一位置淡入另一个。仅 CSS

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

问题描述

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

.first {
  animation: fadeOut 8s ease;
}

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

这是我到目前为止所拥有的一个小提琴。如您所见，下面的 3 列淡入，而不是淡出按钮的位置。
对于更多的上下文，我有 3 列，垂直居中，除了它们堆叠的移动设备。页面加载时显示的按钮应垂直和水平居中。
提前致谢

标签： htmlcsscss-animations

解决方案

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

推荐阅读