CSS动画结束后不显示任何内容

Question

我有一个工作动画，该动画从纯CSS开始加载。 opacity和visibility的问题在于，即使div隐藏了，它仍然会占用空间。

问题

动画制作完成后，如何使div像display: none一样消失？

注释

• 我希望有一个纯CSS解决方案。 hackhack解决方案越少越好。
• 我见过类似的问题，但并非完全是这种情况，也没有很好的答案。
• 我使用animation而不是transition，因为它会在加载时设置动画。

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  padding: 1rem;
}

@keyframes autohide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

Answer 1

您可以使用height属性来实现此效果：

@keyframes autohide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  99% {
    height: auto;
    padding: 1rem;
  }
  100% {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}

height保持auto直到动画的结尾（99％），然后在完成时将其设置为0。

Answer 2

您可以将最后一个关键帧的填充和字体大小设置为零

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  padding: 1rem;
}

@keyframes autohide {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  95% {  
    opacity: 0;
    padding: 1rem;
    font-size: inherit;
  }
  100% {
    padding: 0;
    font-size: 0;
    opacity: 0;
  }
}

<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

Answer 3

你去了，我想这就是你想要的。

  

通过将height赋予0与transition完美搭配

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  transition: height 2s ease;
}

@keyframes autohide {
  0% {
    opacity: 1;
    height: auto;
  }
  90% {
    opacity: 1;
    height: auto;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

您可以根据要求进行过渡。