55

Is it possible to hide element 5 seconds after the page load? I know there is a jQuery solution.

I want to do exactly same thing, but hoping to get the same result with CSS transition.

Any innovative idea? Or am I asking beyond the limit of css transition/animation?

Community
  • 1
  • 1
Alfred
  • 843
  • 2
  • 8
  • 12

4 Answers4

95

YES!

But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.

Therefore, create an animation for the elements in question, and simply toggle visibility:hidden; after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.

FIDDLE

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -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;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>
user1438038
  • 5,319
  • 6
  • 49
  • 78
SW4
  • 65,094
  • 17
  • 122
  • 131
  • 1
    Nice! Was just about to recommend keyframes! +1! – Albzi Feb 24 '14 at 16:59
  • 1
    why you do not animate the opacity? `opacity:1` to 0 – Hamed mayahian Feb 24 '14 at 17:11
  • It works, but I have a question, in your answer, you only included @keyframe and @-webkit-keyframes, I wonder whether it is OK without -moz and -o. Just another question. And I found out that it just wait for 5 seconds and hide the element immediately without animation. I think it would be great if you include fade out transition part as well in your answer. – Alfred Feb 24 '14 at 17:12
  • @Alfred - I'd add in the browser specific prefixes- the above is only a demo – SW4 Feb 24 '14 at 17:13
  • 5
    @Radian - opacity doesnt change the fact the element will still take up space...just not be visible (http://jsfiddle.net/467bb/) - you can see the grey bordered div not collapsing on the content after 5s – SW4 Feb 24 '14 at 17:14
  • 1
    Brilliant! Thank you sir! – mrmut Apr 01 '18 at 16:36
  • This is what I was looking for. Thanks. – Dzenis H. May 22 '20 at 19:59
  • Excellent solution thank you. – MitchellK Apr 24 '21 at 14:19
15

based from the answer of @SW4, you could also add a little animation at the end.

body > div{
    border:1px solid grey;
}
html, body, #container {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container {
    overflow:hidden;
    position:relative;
}
#hideMe {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
<div>
<div id='container'>
    <div id='hideMe'>Wait for it...</div>
</div>
</div>

Making the remaining 0.5 seconds to animate the opacity attribute. Just make sure to do the math if you're changing the length, in this case, 90% of 5 seconds leaves us 0.5 seconds to animate the opacity.

theredforest
  • 216
  • 2
  • 8
  • 2
    I like this solution. Is there a way to combine it so that it fades out and then removes it from the DOM? – Jamie Collingwood Dec 12 '17 at 18:53
  • 1
    You'd need to use some JavaScript if you wanted to remove it from the DOM. If you meant visibly removing it from the document flow then you could use the technique above that mentions setting `height: 0` and `width: 0` - however it comes with caveats as it can cause jumping effects when changing height from 0 to 100%, etc, while also leaving the item focusable using the keyboard. – ourmaninamsterdam Mar 26 '18 at 14:51
10

Of course you can, just use setTimeout to change a class or something to trigger the transition.

HTML:

<p id="aap">OHAI!</p>

CSS:

p {
    opacity:1;
    transition:opacity 500ms;
}
p.waa {
    opacity:0;
}

JS to run on load or DOMContentReady:

setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);

Example fiddle here.

Niels Keurentjes
  • 38,099
  • 7
  • 85
  • 126
  • 2
    Thanks for your answer, but I just wanted not to use javascript at all. If I wished to use javascript or jQuery, I may use jQuery solution I have included in my question. Thanks anyway. – Alfred Feb 24 '14 at 17:08
  • 3
    Please keep in mind that [jQuery is not even remotely a synonym to Javascript](http://meta.stackexchange.com/a/19492/219504). You asked for a solution that doesn't use jQuery's built in transitions, and I gave you an answer with pure CSS transitions and a single line of generic Javascript. You never asked for a solution without JS, the answer is thus complete. – Niels Keurentjes Feb 24 '14 at 17:19
  • Up voting just to make people realize that jQuery != JS – msaad Nov 11 '14 at 22:34
  • 11
    @NielsKeurentjes that is like somebody saying no java and then you give them a GWT solution. Or somebody saying no css and you giving a sass solution. The tags on the question are css, not javascript or jquery. Jquery is synonymous enough with javascript as it's a framework around it. – snowe Mar 24 '15 at 21:38
  • 1
    @snowe2010 not quite. SASS would mean installing a compiler. GWT would mean including an extra library. jQuery means installing and loading an extra library. I therefore assumed the question was how to achieve the intended results with only the means available in a vanilla browser, which kinda boils down to CSS and plain Javascript. The most straightforward and less hacky of those 2 solutions was provided in this answer. The accepted answer is nice, but imo not as clean as this one. Opinions differ, doesn't make the answer in itself wrong. – Niels Keurentjes Mar 24 '15 at 22:36
  • 3
    @NielsKeurentjes yes except that he explicitly stated that he knew there was a jquery solution and he wanted a css solution. If he knew there was a jquery solution then there is obviously a javascript solution, since jquery is just a library to make javascript easier. – snowe Mar 24 '15 at 22:40
  • Oh and please don't consider jQuery a synonym to JS, it would be part of the ECMAScript standard if it wasn't such a huge pile of steaming poo. jQuery is a terrible collection of hacks built to lure bad programmers into thinking they know Javascript. I never use it, neither do any of the professional web developers I know. – Niels Keurentjes Mar 24 '15 at 22:40
2

Why not try fadeOut? 

$(document).ready(function() {
  $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>

fadeOut (Javascript Pure):

How to make fadeOut effect with pure JavaScript

KingRider
  • 1,806
  • 21
  • 20