淡出元素，然后使用纯CSS删除它

Question

我正在尝试淡出一个块元素，然后在淡出动画完成后使用display:none将其从页面中删除。我可以使用JavaScript中的setTimeout()来做到这一点，但我宁愿找到一个纯CSS解决方案。

我做了一些挖掘，并以为我解决了这个问题：

.transition-fade-out {
  display:block;
  opacity: 0;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-fill-mode:forwards;
  animation-duration: 0.5s;
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
    display: block;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

但是，不透明度更改完成后，元素的空间仍在页面上占据。

这可能与纯CSS解决方案有关吗？