如何在 css 动画末尾使用 display:none

我想在关键帧动画的末尾添加一个 display:none 属性。就像这样：

.sw_intro{
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0;display: block;}
    100%{display: none;margin-top: 100vh;}
}

但 display:none-property 没有被使用。我认为这不是我的“代码”的错误，而是不允许/可行的错误。虽然我希望在动画结束时具有这种效果，并且它必须类似于 display:none 效果，而不是 opacity:0;

我怎样才能做到/实现这一目标？用jquery代替？

Thanks!

display不是适用于动画的属性。相反，您可以更改尺寸（height or width) to 0并设置overflow:hidden;到元素。这样，该元素实际上应该从页面中消失。

.sw_intro{
    display:block;
    overflow:hidden;
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes introtop {
    0% {margin-top: 0; width:inherit; height:inherit;}
    100%{margin-top: 100vh; width:0; height:0;}
}