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?
This question is related to
css
animation
transition
based from the answer of @SW4, you could also add a little animation at the end.
body > div{_x000D_
border:1px solid grey;_x000D_
}_x000D_
html, body, #container {_x000D_
height:100%;_x000D_
width:100%;_x000D_
margin:0;_x000D_
padding:0;_x000D_
}_x000D_
#container {_x000D_
overflow:hidden;_x000D_
position:relative;_x000D_
}_x000D_
#hideMe {_x000D_
-webkit-animation: cssAnimation 5s forwards; _x000D_
animation: cssAnimation 5s forwards;_x000D_
}_x000D_
@keyframes cssAnimation {_x000D_
0% {opacity: 1;}_x000D_
90% {opacity: 1;}_x000D_
100% {opacity: 0;}_x000D_
}_x000D_
@-webkit-keyframes cssAnimation {_x000D_
0% {opacity: 1;}_x000D_
90% {opacity: 1;}_x000D_
100% {opacity: 0;}_x000D_
}
_x000D_
<div>_x000D_
<div id='container'>_x000D_
<div id='hideMe'>Wait for it...</div>_x000D_
</div>_x000D_
</div>
_x000D_
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.
Why not try fadeOut?
$(document).ready(function() {_x000D_
$('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<div id='plsme'>Loading... Please Wait</div>
_x000D_
fadeOut (Javascript Pure):
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);
Source: Stackoverflow.com