CSS Auto hide elements after 5 seconds - css

Question

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?

Answer 1

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>

Answer 2

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.

Answer 3

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.

Answer 4

you can hide elements on load and then show and animate them after some delay using CSS and keyframes as below
// keyframes fadeIn Animation
#keyframes fadeIn {
0% {
transform:scale(0,0);
visibility:visible;
opacity:0;
}
100% {
transform:scale(1,1);
visibility:visible;
opacity:1;
}
}
// CSS class
.containerDiv {
visibility:hidden;
animation: fadeIn 3s forwards 3s;
}

Answer 5

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