How to use display:none on the end of a css-animat

Question

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

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?

Thanks!

Answer 1

With jQuery :

Your initial CSS :

 .sw_intro {
    display:block;
    margin-top: 0;
    width: inherit;
    height: inherit;
    opacity: 1;
}

Your jQuery :

$( ".sw_intro" ).animate({
    marginTop: "100vh",
    opacity: 0
}, 800, function() {
    // Animation complete.
    $('.sw_intro').hide();
});

Answer 2

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