CSS hide element, after 5 seconds show it [duplicate]

Question

I found this question CSS Auto hide elements after 5 seconds

and I need to know how to do the oposite of this. Basically:

-Page loads with element hidden

-Wait 5 seconds

-Show element

I'm not very good with CSS so Any help would be nice!

#thingtohide {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

Answer 1

You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.

#showMe {
    opacity: 0;
    -moz-animation: cssAnimation 5s;
    /* Firefox */
    -webkit-animation: cssAnimation 5s;
    /* Safari and Chrome */
    -o-animation: cssAnimation 5s;
    /* Opera */
    animation: cssAnimation 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes cssAnimation {
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<div id='showMe'>Wait for it...</div>