CSS Auto hide elements after 5 seconds

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>