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

Answer 1

try this simple solution.

#showMe {
  animation: cssAnimation 0s 5s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}

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

You can also use opacity insted of visibility

#showMe {
  animation: cssAnimation 0s 5s forwards;
  opacity: 0; 
}

@keyframes cssAnimation {
  to   { opacity: 1; }
}

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

Answer 2

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>