Div gets hidden after CSS animating

Question

I have a delayed animation on page load with CSS3. Everything works fine, but after the animation is done, the DIV goes back into 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

That happens because once the animation is done, it reverts back to the original styling.

you can however, direct your animation to keep the last frame of the animation after its done playing, its called Animation Fill Mode

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

or you can add forwards to your animation declaration:

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

Answer 2

set animation-fill-mode: forwards so it will not go back to first stage of the animation.