jquery - 如何使用显示:none on the end of a css-animation

Question

我想在关键帧动画的末尾添加一个 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 代替？

谢谢!

Answer 1

display 不是适用于动画的属性。相反，您可以将尺寸(height 或 width)更改为 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;}
}