Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css solution to hide div after x amount of seconds

Tags:

css

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 ?

like image 377
MShack Avatar asked Oct 15 '14 23:10

MShack


People also ask

How do you make a div disappear after a few seconds CSS?

To hide an HTML element after certain seconds using CSS, you can use the @keyframes CSS rule and set the CSS property called visibility to value hidden for that particular element in CSS.

How do you hide a division in CSS?

You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.

How can I hide part of a div?

The style. display = “none” will make it disappear when clicked on div.


1 Answers

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>
like image 139
misterManSam Avatar answered Sep 23 '22 18:09

misterManSam