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 w

Answer 1

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

    
Wait for it...

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.