Css Auto Hide Elements After 5 Seconds

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 the overflow (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%:

  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>

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



Leave a reply



Submit