Css auto hide div after 5 seconds

Question

1.00/5 (1 vote)

See more:

With the below CSS i am trying to hide the div after 5 seconds. But it works only with Chrome.

Problem:
It will not work with IE and Firefox, It will hide the div but space remains. please help.

What I have tried:

<div class="success">Successfully saved</div>

.success {
  -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;
    
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
    position: absolute;   
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px;
    position: absolute;     
  }
}

Posted 8-Mar-17 23:50pm

Mohammed_Faisal_Majeed

Updated 9-Mar-17 0:30am

v2

Add a Solution

Comments

[no name] 9-Mar-17 5:55am

For your reference please find the below CSS:

<div class="success">Successfully saved</div>


.info, .success, .warning, .error, .validation {
  -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;
    
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
    position: absolute;   
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px;
    position: absolute;     
  }
}

F-ES Sitecore 9-Mar-17 6:02am

According to this you need to define it for each browser as they seem to support different syntax.

Richard Deeming 9-Mar-17 10:43am

It looks like that's an old article. According to Can I use[^], Chrome hasn't needed the -webkit- prefix since v43; Firefox hasn't needed the -moz- prefix since v16; Edge, IE10 and IE11 don't need a prefix; and IE9 and below doesn't support CSS animation at all. :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohammed_Faisal_Majeed · Answer 1 · 2017-03-09T00:30:00

Solution 1

Than defining for each browser Jquery is better.

 $(document).ready(function () {          

            setTimeout(function() {
                $('.success').slideUp("slow");
            }, 5000);
});

Posted 9-Mar-17 0:30am

Mohammed_Faisal_Majeed