Css solution to hide div after x number of seconds

Question

Anyway, using css3 only to remove / hide #a, say, 90 seconds of page loading?

<div id="container"> <div class="box"> <a id="hide_after_90_seconds"></a> </div> </div> 

I would like to go from the screen: display unit: no, if possible?

Answer 1

This is possible using CSS animations and the forwards property to pause the animation 100%. The display property cannot be animated.

The element is set to position: relative , and then opacity: 0 and left: -9999px when it reaches 100%. It will fade and then pull itself out of the viewing area.

See browser support here - Compatible IE 10+!

Here is a complete list of animated properties.

Here are three ways to pull a div out of the viewport 100%:

• left: -9999px combined with position: relative on the element (as in the example below)

• height: 0 or max-height: 0 combined with text-indent: -9999px

• This borderline example from @Troy Gizzi

Example

This example fades the text after 5 seconds and then removes the div from the viewport.

 div { -webkit-animation: seconds 1.0s forwards; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 5s; animation: seconds 1.0s forwards; animation-iteration-count: 1; animation-delay: 5s; position: relative; background: red; } @-webkit-keyframes seconds { 0% { opacity: 1; } 100% { opacity: 0; left: -9999px; } } @keyframes seconds { 0% { opacity: 1; } 100% { opacity: 0; left: -9999px; } } 

 <div>hide me after 5 seconds</div> 

Answer 2

 #hidethis { animation: css 0s 3s forwards; } @keyframes css { to { visibility: hidden; } } /* visibility / overflow: hidden; */ 

 <div id='hidethis'>Wait for 3 seconds...</div> 

Answer 3

Closest you can use css is just that .. it can be improved further, but it is.

http://jsfiddle.net/techsin/7g7ofazj/

 .red { background-color: red; width: 100px; height: 100px; -webkit-animation: ani 1s forwards; } @-webkit-keyframes ani { 89% {opacity:1;height: 100px;} 90% {opacity:0; height: 0;} 100% {opacity:0; height: 0;} } 

And if you want to do with javascript / jquery ..

you would do it ..

 var ele = $(".hide_after_90_seconds"); setTimeout(function() { ele.hide(); }, 9000);