css - css动画结束后不显示

Question

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

问题

display: none动画完成后如何使 div 消失？

笔记

• 我希望有一个纯 CSS 解决方案。hackish 解决方案越少越好。
• 我见过类似的问题，但不完全是这种情况，也没有很好的答案。
• 我使用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.

标签： cssanimationtimecss-animationsdisplay

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完成时设置为。