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 ?
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.
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.
The style. display = “none” will make it disappear when clicked on div.
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%:
left: -9999px
combined with position: relative
on the element (Like in the example below)
height: 0
or max-height: 0
combined with text-indent: -9999px
This example with border-width from @Troy Gizzi
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With