显示属性的CSS关键帧不起作用

Question

我有一个div元素，我想从屏幕底部滑入。 但是，以下CSS可以正常工作。 div占用空间，因此可以看到垂直滚动条。

如何在不显示滚动条的情况下通过此CSS关键帧将此div元素滑入和滑出（从底部）？

我尝试在div上使用display：none，并在关键帧中设置display：block，但这根本不起作用（div仍然显示：none）。 CSS关键帧似乎不适用于display属性。

带有animationIn的div的CSS：

div.animateIn {
    -webkit-animation-name: slideIn; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    animation-name: slideIn;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}  

要插入的CSS关键帧：

@keyframes slideIn {
0% {
    top: 100vh;
    display: block;
}

100% {
    top: 25vh;
    display: block;
}
}