CSS hide element, after 5 seconds show it

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

This is literally a case of swapping out the properties between the end and beginning states from the target question you linked. — TylerH, Oct 17 '17 at 20:58
@MattWeber introducing a library that depends on another programming language is not in any way simpler than using CSS to show a hidden element after 5 seconds. — TylerH, Oct 17 '17 at 21:00
@TylerH According to the answers there is a better way to do the inverse, additionally, I didn't know what needed to be changed an I had already played around with it but had no success. Hence why I made a new question instead of necroing that old thread. — Dylan Grove, Oct 17 '17 at 21:30
Don't ever worry about posting to an old Q&A page. This isn't a forum, so there's no problem with asking for clarification on an old question or answer, so long as it is pertinent. — TylerH, Oct 17 '17 at 21:34

Jayakrishnan · Accepted Answer · 2017-10-17T21:07:16.860

34

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>

edited Oct 17 '17 at 21:07

answered Oct 17 '17 at 20:53

Jayakrishnan

1,295
2
13
27

1

good suggestion.Thanks – Jayakrishnan Oct 17 '17 at 21:07
This works well! however, It leaves open spaces which looks quite ugly. Changing visibility to display:none;/display:inline; doesn't work. – Dylan Grove Oct 17 '17 at 21:20
https://jsfiddle.net/jayakrishnancn/opsara9L/2/ is this what you are asking for? . if so i will update my answer – Jayakrishnan Oct 17 '17 at 21:29
https://imgur.com/a/dqjqt – Dylan Grove Oct 17 '17 at 21:35
This is what it looks like with that Jsfiddle implemented: https://i.imgur.com/mBVrqUL.png – Dylan Grove Oct 17 '17 at 21:40
I think the page is not loading correctly . there is no "bookmark" container. – Jayakrishnan Oct 17 '17 at 21:59
https://jsfiddle.net/jayakrishnancn/opsara9L/5/ this is working for me. from the image im guessing that bookmark div contains a padding. so remove that padding and it will work fine – Jayakrishnan Oct 17 '17 at 22:00

yohohosilver · Answer 2 · 2017-10-17T21:13:07.210

6

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>

edited Oct 17 '17 at 21:13

answered Oct 17 '17 at 20:38

yohohosilver

367
1
2
15

2

you can use `cssAnimation 0s 5s forwards;` and get rid of 99% in keyframe, it will create a delay of 5s and no animation time – Jayakrishnan Oct 17 '17 at 20:56
Good call, I set the answer the way it was to allow for the asker to see they can adjust and set the opacity and the timeframes associated. This way they can set opacity to slowly go to 50% over 2 seconds then on then quickly to 100 on the 3rd... so on and so forth. – yohohosilver Oct 17 '17 at 20:57

CSS hide element, after 5 seconds show it

2 Answers2

Linked