css solution to hide div after x amount of seconds

问题:

Any way using css3 only to remove/hide the #a after say 90 seconds of page load ?

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

i would love to go from display:block to display:none if possible ?

回答1:

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

The element is given position: relative and then opacity: 0 and left: -9999px when it reaches 100%. It will fade and then pull itself outside the viewport.

See browser support here - Compatible IE 10+ !

Here is a complete list of animated properties.

Here are three ways to pull the div outside of the viewport at 100%:

1. left: -9999px combined with position: relative on the element (Like in the example below)

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

3. This example with border-width 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>

回答2:

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

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

回答3:

Closest you can come with css only is this..it might be improved further but this as it's..

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 wanted to do with javascript/jquery..

you would do this..

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

文章来源: css solution to hide div after x amount of seconds