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>
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>
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>
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);
});
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>
Showing an element for 5 seconds, then hide and show next element
I assume you are trying to achieve an endless loop.
I think you should use interval in that case, and do fadeOut/fadeIn of elements.
i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');
let myarr = [i1, i2, i3, i4, i5];
let active = 1;
setInterval(() => {
$(myarr[active - 1]).fadeOut(500)
if (active >= myarr.length) {
active = 0
}
setTimeout(() => {
$(myarr[active]).fadeIn(500);
active = active + 1;
}, 500)
}, 5000)
What this does, is updates elements every 5 sec to next element, if it reached the end, it resets it to zero.
Checkout this fiddle
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>
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() { ... }
Hide div after a few seconds
This will hide the div after 1 second (1000 milliseconds).
setTimeout(function() { $('#mydiv').fadeOut('fast');}, 1000); // <-- time in milliseconds
#mydiv{ width: 100px; height: 100px; background: #000; color: #fff; text-align: center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="mydiv">myDiv</div>
Related Topics
Using Less, CSS3 Calc() Doesn't Work Correctly
Gatsby: Set Background Image with CSS
How to Create a Pulsing Glow Ring Animation in CSS
Style Using Nth-Child to Keep Table's Aspect (Alternating Row Colors) Updated
Set Button in Position "Fixed" in React Native
How to Use a Stylus Variable in Calc
If Multiple Sources Are Listed in an @Font-Face, Are All of Them Loaded on the Client Side
Understanding the Difference Between the Flex and Flex-Grow Properties
How to Select First Img Tag in a Div with Many Img Tag
Angular Material 2 Table Header Center Alignment
How to Print Only Parts of a Page
@Font-Face Not Displaying Correctly in Ie
How Does CSS Formatting in a Google Maps Bubble Work