Div hides after CSS animation

Question

I have delayed animation when loading a page using CSS3. Everything works fine, but after the animation finishes, the DIV returns to visibility: hidden.

.content-left {
    margin-left: 100px;
    margin-top: 32px;
    position: absolute;
    z-index: 1; 
    visibility: hidden;
    -webkit-animation: fadein 1s 2s ease; /* Safari and Chrome */
    animation: fadein 1s 2s ease;
}

@keyframes fadein {
from { height: 0px; }
to   { height: 421px; visibility: visible;} }

@-webkit-keyframes fadein {
from { height: 0px; }
to   { height: 421px; visibility: visible;}}

Answer 1

This is because as soon as the animation is complete, it reverts to the original style.

you can, however, tweak the animation to save the last frame of the animation after it is completed, called Animation fill mode

animation-fill-mode: forwards;- saves the last frame of the animation.
animation-fill-mode: backwards;- saves the first frame of the animation.

or you can add forwardsanimations to your ad:

-webkit-animation: fadein 1s 2s ease forwards; /* Safari and Chrome */
animation: fadein 1s 2s ease forwards;

Answer 2

animation-fill-mode: forwards, .