如何使用显示：css动画结束时无显示

问题描述

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

I want to add a display:none property to a keyframe-animations' end. Like so:

.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 effect，而不是opacity：0;

But the display:none-property doesn't get used. I assume that is not an error of my "code" but something that is not allowed/doable. Though I'd like to have that effect at the end of the animation and it must be something like display:none effect, not opacity:0;

我该怎么办/实现了吗？

How could I do/achieve that? With jquery instead?

谢谢！

推荐答案

display 不是可用于动画的属性。相反，您可以将尺寸（高度或宽度）更改为 0 并将 overflow：hidden; 设置为元素。这样，页面上的元素应该有效地消失了。

display is not a property that will work with animation. Instead you could change the dimensions (either height or width) to 0 and set overflow:hidden; to the element. In that way, the element should be effectively missing from the page.

.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;}
}

这篇关于如何使用显示：css动画结束时无显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！