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

Question

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

问题

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

笔记

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

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

通过给予height0与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.

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