Any way using css3 only to remove/hide the #a after say 90 seconds of page load ?
-
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);
讨论(0)
-
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
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>
讨论(0)
-
#hidethis { animation: css 0s 3s forwards; }
@keyframes css { to { visibility: hidden; } }
/* visibility / overflow: hidden; */
<div id='hidethis'>Wait for 3 seconds...</div>
讨论(0)