CSS Auto hide elements after 5 seconds
YES!
But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display
, or changing dimensions and setting to overflow:hidden
) in order to correctly hide the element and prevent it from taking up visible space.
Therefore, create an animation for the elements in question, and simply toggle visibility:hidden;
after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.
FIDDLE
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#hideMe {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
HTML
<div id='hideMe'>Wait for it...</div>
CSS hide element, after 5 seconds show it
try this simple solution.
#showMe { animation: cssAnimation 0s 5s forwards; visibility: hidden;}
@keyframes cssAnimation { to { visibility: visible; }}
<div id='showMe'>Wait for it...</div>
Hide an element after 5 seconds only CSS does not work on Firefox
There are some issues with the code above:
- The animation is not the same for all browsers: one is animating the
visibility
(webkit), the other one is animation theoverflow
(standard). - The
overflow
property is not animatable. - Firefox has a history of issues with the
visibility
property (this is not your fault but a problem of Firefox itself, you can find many questions on SO related to it).
Because of the way in which you are running the animation (with a duration of 0s), you can trick Firefox by using the from
in the CSS animation. The thing is that Firefox is not animating the visibility
, but it will apply the style in the from
part of the animation anyway, so you'll get the desired effect.
.classname { -webkit-animation: cssAnimation 0s ease-in 5s forwards; -moz-animation: cssAnimation 0s ease-in 5s forwards; -o-animation: cssAnimation 0s ease-in 5s forwards; animation: cssAnimation 0s ease-in 5s forwards; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}@keyframes cssAnimation { from { visibility:hidden; } to { width:0; height:0; visibility:hidden; }}@-webkit-keyframes cssAnimation { from { visibility:hidden; } to { width:0; height:0; visibility:hidden; }}
<div class="classname">This will hide</div>
css solution to hide div after x amount of seconds
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 withposition: relative
on the element (Like in the example below)height: 0
ormax-height: 0
combined withtext-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>
Right to Left div and hide after 5 sec using CSS
Consider a second animation. You can also simplify your code by removing a lot of non needed properties
.successAlet { background-color: red; color: #fff; position: fixed; top: 0; width: 400px; right: 0; z-index: 1001; animation-name: fadeInRight,hide; animation-duration: 1s; animation-delay: 0s,3s; animation-fill-mode: both;}
@keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); }}
@keyframes hide { 100% { opacity: 0; }}
<div class="successAlet"> <h2>Animate and then autohide in 5 sec</h2></div>
jQuery autohide element after 5 seconds
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#successMessage").hide('blind', {}, 500)
}, 5000);
});
Note: In order to make you jQuery function work inside setTimeout you should wrap it inside
function() { ... }
How to hide element after mouse unhover 5 seconds ago?
2 hours later, I figured it out.
<div id="container">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
</div>
#div1{
display: block;
}
#div2{
display: none;
}
$('#container').mousemove(function() {
$('#div2').show();
setTimeout(function(){
if ($('#div2').is(":hover")) {
} else {
$('#div2').hide();
}
},5000);
});
Related Topics
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
Change a Html5 Input'S Placeholder Color With Css
Align Inline-Block Divs to Top of Container Element
Using CSS For a Fade-In Effect on Page Load
Why Do Browsers Create Vendor Prefixes For CSS Properties
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
Common Breakpoints For Media Queries on a Responsive Site
Left Aligned Last Row in Centered Grid of Elements
Bootstrap Take Full Width for Select Drop Down
Canvas Is Stretched When Using CSS But Normal With "Width"/"Height" Properties
What Methods of 'Clearfix' How to Use
Margin on Child Element Moves Parent Element
Is There a CSS Selector by Class Prefix
Better Way to Set Distance Between Flexbox Items